Access router outlet component from parent

Question

I have the following app root:

@Component({     selector: 'my-app',     providers: [],     templateUrl: `<button (click)="callChildFunction()">Close</button>                   <router-outlet></router-outlet>` }) export class AppComponent {      constructor() {      }      callChildFunction(){         // Call myFunction() here     }  } 

And here is my child (component used in the router-outlet):

@Component({     selector: 'child',     providers: [],     templateUrl: `<div>Hello World</div>` }) export class ChildComponent {      constructor() {      }      myFunction(){         console.log('success');     }  } 

I have discovered that I can use RouterOutlet to get the component functions but it doesn't seem accessible from within the app root.

How can I call myFunction() from the app root?

Answer 1

Make use of activate event for the same . Whenever we load a component in router outlet a activate event is emitted make use of that to get the component ref and call the respective method.

Parent Component

  <div class="container">     <router-outlet (activate)="onActivate($event)"></router-outlet>   </div> 

Template

  onActivate(componentRef){     componentRef.works();   } 

Child Comp

 works(){     console.log("works");   } 

Answer 2

A small addition to @Rahul Singh great answer:

Make sure you check, which component instance is returned in the
(staying at Rahul's example) onActivate(componentRef) method,
and only call works(), if that component indeed has such method.

Example:

     onActivate(componentRef){        if(componentRef instanceof ChildWithWorksMethodComponent){          componentRef.works();          return;          }          console.log("This is not the ChildWithWorksMethodComponent");       }   

Otherwise, every time you navigate to a route, which component doesn't have such method, your console log will be full of errors like:

ERROR TypeError: componentRef.works is not a function