Router-outlet activating unexpectedly in wrong place

Question

I have a child control that I want to activate inside a mat-tab-group control (I don't want to use mat-nav because I want the animations provided by mat-tab-group - and it's just easier to let the tab control handle component creation.

However my child route is activating in multiple places.

<mat-tab-group>

    <mat-tab label="Animals">

        <ng-component *ngIf="showCats">
            Cats
        </ng-component>

        <ng-component *ngIf="!showCats">
            Dogs
        </ng-component>

    </mat-tab>

    <mat-tab label="FAQ">
        <router-outlet></router-outlet>
    </mat-tab>

</mat-tab-group>

May also be useful https://stackoverflow.com/questions/40413133/angular-2-throwing-error-outlet-is-not-activated/54849133#54849133 — Simon_Weaver, Feb 24 '19 at 05:49

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

This can occur if you put `ng-component` instead of `ng-container`

Very easy mistake to make - but the router will consider ng-component as some special type of child and automatically create a router-outlet inside it.

The solution is simple - use ng-container

 <ng-container *ngIf="showCats">CATS</ng-container>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '19 at 23:06

Simon_Weaver

140,023
84
646
689

I'm not clear of the exact mechanism that causes this automatic `router-outlet` - if anyone knows please comment! – Simon_Weaver Feb 23 '19 at 23:07

Router-outlet activating unexpectedly in wrong place

1 Answers1

This can occur if you put ng-component instead of ng-container

This can occur if you put `ng-component` instead of `ng-container`