Passing Data into a Component

The inputs attribute defines a set of parameters that can be passed down from the component's parent. For example, we can modify the Hello component so that name can be configured by the parent.

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

@Component({
  selector: 'hello',
  template: '<p>Hello, {{name}}</p>'
})
export class Hello {
  @Input() name: string;
}

The point of making components is not only encapsulation, but also reusability. Inputs allow us to configure a particular instance of a component.

We can now use our component like so:

<!-- To bind to a raw string -->
<hello name="World"></hello>
<!-- To bind to a variable in the parent scope -->
<hello [name]="name"></hello>

View Example

Unlike Angular 1.x, this is one-way binding.