Why [active] in <a mat-tab-link > donst work in Angular?

Question

    <div class="d-flex d-column themed-tab-nav">
            <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
              <a mat-tab-link  *ngFor="let link of navLinks" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{ link.label | translate }}</a>
            </nav>
            <mat-tab-nav-panel #tabPanel>
                <router-outlet ></router-outlet>
            </mat-tab-nav-panel>
        </div>

I work with Angular Material and [active] is not working . Why ?

Answer 1

I think the problem might be that you are not actually setting a routerLink for each tab:

<a mat-tab-link  *ngFor="let link of navLinks" 
    [routerLink]="link"
    routerLinkActive 
    #rla="routerLinkActive" 
    [active]="rla.isActive"> {{ link.label | translate }}
</a>

This assumes that link is a string that represents the route path. The documentation has a couple of nice examples.