angular - angular2 - communication between components -

i search communication between components angular2, need little bit different. have structure this:

father --> son --> son

my code looks this

father component:

@component({ selector: 'app', templateurl: './instituicao/components/instituicao.html', directives: [instituicaoform, instituicaolist] })  export class instituicaocmp {} 

my instituicao.html

<instituicao-form>     <div class="row">         <instituicao-list></instituicao-list>     </div> </instituicao-form> 

i have form @ <instituicao-form> want populate when user clicks @ item of table list <instituicao-list> @ <instituicao-list>:

<tr role="row" *ngfor="#item of items | instituicaopipe : searchitems">           <td>{{item.id.idinstituicao}}</td>           <td>{{item.descinstituicao}}</td>           <td>             <button class="btn btn-link" (click)="here want populate form @ instituicao-form component(item)"> editar</button>           </td>         </tr> 

my instituicao-form html form fields <input type="text" [(ngmodel)]="item.idinstituicao"

i using ng-model @ <instituicao-form> , putting list @ <instituicao-form> too.

please me this?

from question assume want this:

@component({   selector: 'app',   directives: [instituicaoform, instituicaolist],   template: `   <instituicao-form #form>     <div class="row">       <instituicao-list (selectionchanged)="#form.update($event)></instituicao-list>     </div>   </instituicao-form>`, }) export class instituicaocmp { } 

@component({   selector: 'instituicao-list',   template: `     <tr role="row" *ngfor="#item of items | instituicaopipe : searchitems">       <td>{{item.id.idinstituicao}}</td>       <td>{{item.descinstituicao}}</td>       <td>         <button class="btn btn-link" (click)="select(item)"> editar</button>       </td>     </tr>`, }) export class instituicaolist {   var items;   @output() selectionchanged: eventemitter = new eventemitter();   select(item) {     this.selectionchanged.emit(item);   } } 

@component({   selector: 'instituicao-form',   template: ` <form>   ... </form>`, }) export class instituicaoform {   var item;   update(value) {     this.item = value;   } } 

not tested