angular - Call nested component function angular2 -

imagine host component code:

@component({     directives: [nestedcomponentdirective] })  export class parentcomponent {      save():void {             this.myservice.myhttpcall().subscribe((event) => {                 // if callback successfull need let directive know             })         } 

now nested component:

@component({   selector: 'someselector',   template: `   <div>     <button [stuff]="stuff"</button>   </div>` })   export class continuationcheckdirective {   @input() waitingforhostedcomp(value) {     console.log ("value", value)   } 

how call waitingforhostedcomp host-component (parent)?

the way can using viewchild, i.e., inject child component parent viewchild.

import { viewchild } '@angular/core'; import { component } '@angular/core'; import { childcomponent } './child.component';  @component({   selector: 'parent-component',   template: ` implements afterviewinit   <child-component></child-component>   `,   directives: [childcomponent] }) export class parentcomponent {   @viewchild(childcomponent)   private childcomponent: childcomponent;    save(): void {         this.myservice.myhttpcall().subscribe((event) => {             this.childcomponent.waitingforhostedcomp(event);         })   }  } 

you can see more details in component interaction cookbook: parent calls viewchild.