Input

• Allows data to flow from a parent component to a child component
• Defined inside a component via the @Input decorator: @Input() someValue: string;
• Bind in parent template: <component [someValue]="value"></component>
• We can alias inputs: @Input('alias') someValue: string;

import { Component, Input } from '@angular/core';
@Component({
  selector: 'my-component',
  template:
` 
  <div>Greeting from parent:</div>
  <div>{{greeting}}</div>
  `
})
export class MyComponent {
  @Input() greeting: String = 'Default Greeting';
}

// Parent component
@Component({
  selector: 'app',
  template:
  ` 
  <my-component [greeting]="greeting"></my-component>
  <my-component></my-component>
  `
})

export class App {
  greeting = 'Hello child!';
}

In the parent template, remember to use [] as it tells the angular that it is an input.

---

Backlinks

• Component Driven Architecture