Check if router-outlet is in use

Question

All,

I would like to use *ngIf to remove a section of a page if a specific router-outlet has a component.

I've tried searching through ActivatedRoute and Router, but I can't seem to figure it out. How do you check if a specific router-outlet is in use?

Answer 1

Can be solved like this:

<div [hidden]="!myOutlet.isActivated">
  <router-outlet name="my-outlet" #myOutlet="outlet"></router-outlet>
</div>

No changes in component class needed.

Answer 2

I figured this out. You need to use the events for router outlets. However, you can't use ngIf because events won't be fired unless the outlet is in the dom.

ts

showOutlet: boolean;

onActivate(event : any) {
  this.showOutlet = true;
}

onDeactivate(event : any) {
  this.showOutlet = false;
}

html

<div [hidden]="!showOutlet">
  <router-outlet name="my-outlet"
      (activate)="onActivate($event)"
      (deactivate)="onDeactivate($event)"></router-outlet>
</div>