I have components in hierarhy: app.component > intro.component > header.component. I want to use in header.component, method that is defined in app.component. I recognize there's way to make it with @viewChild. What's easest way to make it work?
//edit I want to do (click) event on html tag that is in header.component.html. In this function I want to run method from app.component.
You can also pass callback function to child component as @input (React style):
//app.component.html:
<app-intro [appMethod] = "boundMethod"></app-intro>
export class AppComponent {
ngOnInit() {
this.boundMethod = this.appMethod.bind(this);
}
appMethod() {
console.log("appMethod called");
}
}
//intro.component:
<app-header [appMethod] = "appMethod"></app-header>
export class IntroComponent {
@Input() public appMethod: Function;
}
//header.component:
export class HeaderComponent {
@Input() appMethod: Function;
ngOnInit() {
appMethod(); // Call parent method
}
}A possible example:
In the html in app.component.html:
...<app-intro></app-intro>
the html in intro.compoennt.html:
...<app-header #header></app-header>
and in app.component.ts:
@ContentChild("header")
public headerComponent: HeaderComponent;
