Angular 2 - Passing Component Data: Parent to Child

Passing Component Data: Parent to Child

The image below describes how to configure your components to pass data from a parent component to a child component.


The diagram purposefully lists the app.component.html and .ts files on top, as they are both the root component and the parent component to the header component.html and .ts files, listed on the bottom.

The data gets initialized in the app.component.ts (ninja {...} line 9), easy enough....

In the view (app.component.html) a custom property binding was used to pass the data into the selector [ninja]="ninja" (line 3).

In the header.component.ts file the expected input variable (line 10) is declared (don't forget to import the @Input decorator on the top in line 1!)

Finally, in the header.component.html view file the data is output using simple string interpolation (lines 14/15).

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/angular2/angular-2-passing-component-data-parent-to-child/