0

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?

Sivakumar Tadisetti
  • 4,865
  • 7
  • 34
  • 56
  • The error is correct, unless you have specifically configured an `@input` decorator for your `nav` component – Michael Doye May 15 '18 at 11:37
  • @Und3rTow I want to achieve below functionality https://stackoverflow.com/questions/41937176/programmatically-select-md-tab-in-angular-2-material. But I am using mat-tab-nav-bar. I don't know how to set Input decorator for selectedIndex. – Sivakumar Tadisetti May 15 '18 at 11:40
  • then you can use `` which accepts `selectedIndex`, you read more in the [docs](https://material.angular.io/components/tabs/api#MatTabGroup) – Michael Doye May 15 '18 at 11:43
  • I want to load tab content based on Url, so that's the reason I am using mat-tab-nav-bar – Sivakumar Tadisetti May 15 '18 at 11:49

2 Answers2

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.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
  • Hi. Could you give an example? – Kathrine Hanson Jun 04 '20 at 12:30
  • https://material.angular.io/components/tabs/overview#tabs-and-navigation – G. Tranter Jun 04 '20 at 19:47
  • [active]="rla.isActive" so with that property I can instead of rla.isActive define the tab that I want to be active by default after refreshing or coming back from another route? will it work? – Kathrine Hanson Jun 05 '20 at 05:52
  • Yes - `active` is an input for the `mat-tab-link` directive to control the appearance. If you are using routing, the example shows how to bind `active` to your router using the `routerLinkActive` directive and a template variable so that the 'tab' looks active only if its route is active. This is preferred over managing state yourself since the router already keeps track of state. – G. Tranter Jun 05 '20 at 16:41
0
// try to add in module files 

import {MatTabsModule} from '@angular/material/tabs';
Shashwat Gupta
  • 5,071
  • 41
  • 33
  • Might you please [edit] your question to add some explanation how this code fragment answers the question *selectedIndex is not working for mat-tab-nav-bar angular material tabs*? - [From Review](https://stackoverflow.com/review/low-quality-posts/29454296). – dbc Jul 25 '21 at 22:08