[Angular 2] @ViewChild to access child component ' s method

When you want to access child component's method, you can use @ViewChild in the parent:

Parent Component:

Import {Component, OnInit, Viewchild} from 'Angular2/core'; import {heroservice, Hero} from './heroservice'; import {Observable} from 'Rxjs/rx'; import {Selectedhero} from './selected-hero'; import {Heroitem} from './hero-item'; @Component ({selector:'hero-list', directives: [Selectedhero, Heroitem], Template: '<button (click) ="Removeselectedhero ()">clear</button> <ul> <li *ngfor="#hero of heros | async"> "Hero"(changed) ="Thishero = $event">"Thishero"></selected-hero>    `}) ExportclassHerolist implements oninit{heros:observable<Hero[]>;    @ViewChild (Selectedhero) Selecteditem:selectedhero; Constructor ( PublicHeroservice:heroservice) {} ngoninit () { This. Getheros (); } Removeselectedhero () { This. SelectedItem. Clear    (); } getheros () { This. heros = This. Heroservice.getheros (); }} 

Child Component:

Import {Component, Input} from 'Angular2/core'; import {Hero} from './heroservice'; @Component ({selector:'Selected-hero', Template: '    `}) Exportclassselectedhero{@Input () Thishero:hero; Constructor () {} Clear() { This. Thishero =NewHero (""); }}

[Angular 2] @ViewChild to access child component ' s method