Suggest improvements


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.


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';

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