[Angular2] Pass data from parent to child with input binding

Scenario


If we had two html pages which has parent and child relationship. If we would like to pass parameters from parent to child, how to implement in Agnular2?

How-to
Step 1. Define the input parameter names in child component which typically adorned with @Input decorations., the code snippet is as bellows:

1 2 3 4 5 6 7 8 9 10 11 12 13

@Component({ selector: 'sub-task', directives: [MODAL_DIRECTIVES, SELECT_DIRECTIVES, NgClass], providers: [SubtaskService, UserService, IssueService, ProjectService], templateUrl: 'sub.task.html' }) export class SubTaskComponent implements OnInit { @Input() issue: Issue; @Input() watchers: Watcher[]; // ... }

Step 2. The Parent page, issue.detail.html, is binding its master string property to the child's property. The code snippet is as follows:

1 2 3

<div class="container" *ngIf="issue.id"> <sub-task [issue]="issue" [watchers]="issue.watchers"></sub-task> </div>