Suggest improvements

Inputs

Components are the core of an Angular 2 app but most developers need to know how to pass data into components to dynamically configure them.

@Input

To define an input for a component, we use the @Input decorator.

For example, our <user-profile> component needs a user argument to render information about that user:


<user-profile [user]="currentUser"></user-profile>

So, we add an @Input binding to user:


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

@Component({
  selector: 'user-profile',
  template: '<div>{{user.name}}</div>'
})
export class UserProfile {
  @Input() user;
  constructor() {}
}