selectedIndex is not working for mat-tab-nav-bar angular material tabs

Question

I wrote the tabs code like below

<nav mat-tab-nav-bar [selectedIndex]="0">
    <a mat-tab-link 
        *ngFor="let link of navLinks; let i = index;"
        [routerLink]="link.path"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        <div class="link-tab-label">{{link.label}}</div>
        <mat-icon class="link-tab-close" (click)="closeTab(i)">close</mat-icon>
    </a>
</nav>

When I run the project, I am getting the issue which is shown below

compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'selectedIndex' since it isn't a known property of 'nav'. ("
        <mat-card>
          <mat-card-content>
              <nav mat-tab-nav-bar [ERROR ->][selectedIndex]="0">

How to use selectedIndex with mat-tab-nav-bar?

Answer 1

mat-tab-nav-bar does not have a selectedIndex property and the mat-tab-link s inside a mat-tab-nav-bar are not really tabs. mat-tab-nav-bar "provides a tab-like UI for navigating between routes." To set the active "tab" or link, you set the active route through your application's router. The "tab" shows as active via the routerLinkActive directive and the active property.

Answer 2

// try to add in module files 

import {MatTabsModule} from '@angular/material/tabs';