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

admin管理员组

文章数量:1420891

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

piler.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?

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

piler.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?

• javascript
• angular
• typescript
• angular-material

Share Improve this question Follow asked May 15, 2018 at 11:33 Sivakumar TadisettiSivakumar Tadisetti 5,05177 gold badges3838 silver badges6161 bronze badges 4

• The error is correct, unless you have specifically configured an @input decorator for your nav ponent – Michael Doye Commented May 15, 2018 at 11:37
• @Und3rTow I want to achieve below functionality stackoverflow./questions/41937176/…. But I am using mat-tab-nav-bar. I don't know how to set Input decorator for selectedIndex. – Sivakumar Tadisetti Commented May 15, 2018 at 11:40
• then you can use <mat-tab-group> which accepts selectedIndex, you read more in the docs – Michael Doye Commented May 15, 2018 at 11:43
• 1 I want to load tab content based on Url, so that's the reason I am using mat-tab-nav-bar – Sivakumar Tadisetti Commented May 15, 2018 at 11:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

// try to add in module files 

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

本文标签： javascriptselectedIndex is not working for mattabnavbar angular material tabsStack Overflow