CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5041

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

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?

Upvotes: 1

Views: 5596

Answers (2)

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

// try to add in module files 

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

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17918

mat-tab-nav-bar does not have a selectedIndex property and the mat-tab-links 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.

Upvotes: 6

Related Questions