Angular 2 Components

Angular 2 @Inputs - How to Passing data into Angular 2 components with @Input?

@Input allows you to pass data into your controller and templates through html and defining custom properties.

@Input  is used to define an input for a component, we use the @Input decorator.

Angular 2 components is the core components of applications but you must need to know “how to pass data into components to dynamically?” and that time you need to define an input component.

Stayed Informed - Angular 2 @Output

You can see the below example for passing the user data in to the components.

Example 1,
import { Component, Input } from '@angular/core';

@Component({
  selector: user-info,
  template: <div> Hello, This is {{ userInfo.name}}</div>”
})

export class UserInfo {
  @Input() userInfo;
  constructor() { }
}

<user-info [userInfo]="currentUser"></user-info>

The components <user-info></user-info> is use to render the user information on the view.

Example 2,

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
    .app {
      text-align: center;
      background: #f5f5f5;
    }
  `],
  template: `
    <div class="app">
      <counter [count]="defaultCount"></counter>
    </div>
  `
})
export class AppComponent {
  defaultCount: number = 20;
}

Stayed Informed - Angular 4 vs. Angular 2


I hope you are enjoying with this post! Please share with you friends. Thank you so much!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book