child component not get display while using router-outlet active event to get child component instance

Question

While using router-outlet, i have used “active” event ton take child component instance.

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

Sample - https://stackblitz.com/edit/angular-router-basic-example-a9jpsd?file=app/app.component.ts

Example code –

App.component.html

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

App.component.ts

public onRouterOutletActivate(event : any) {
    console.log(event);
}

But child component not get displayed at initial loading, but element is in DOM.

Any idea about this problem?

Answer 1

Return the boolean value for which (activate) is looking for:

public onRouterOutletActivate(event : any) {
    if(event){
      console.log(event);
      return true;
    }else{ return false; }
}

And also just check in app.component.html, if you are calling the same onRouterOutletActivate function on (activate):

(activate)="onRouterOutletActivate($event)"

Hope it works for you now !!!