CODEWITHSUNDEEP
angularrouter
Simon_Weaver
Simon_Weaver

Reputation: 145950

Router-outlet activating unexpectedly in wrong place

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>

Upvotes: 0

Views: 87

Answers (1)

Simon_Weaver
Simon_Weaver

Reputation: 145950

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>

Upvotes: 1

Related Questions