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!