How to call a function from root component to another component inside <router-outlet>

Question

I have a header component which is injected into app.component.html(as i want it to be fixed). All other components are defined in <router outlet>. Every component has a function showData() that should be called when date(in the header component) changes. How can I achieve this?. Do I have to use ActivatedRout Configurations?

app.component.html

<app-header></app-header> <router-outlet></router-outlet>

Answer 1

You can use this:

<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet>

activeComponent: any;

onRouterOutletActivate(component: any) {
    this.activeComponent = component;
}

dateChangedEvent() {
    this.activeComponent.showData();
}