CODEWITHSUNDEEP
angulartypescriptangular-material
Herge
Herge

Reputation: 59

Tabs angular show the first tab

I try to use the Tabs which comes from angular material so I follow the documentation but when I use the piece of code that you find just below the first tab is not displayed when the page has finished loading I am forced to click on it.

official documentation about the tabs links: https://material.angular.io/components/tabs/overview

How to make the first tab to be already loaded without me needing to click on it?

tabs.html

<nav mat-tab-nav-bar [backgroundColor]="background">
  <a mat-tab-link *ngFor="let link of links"
     (click)="activeLink = link"
     [active]="activeLink == link"> {{link}} </a>
  <a mat-tab-link disabled>Disabled Link</a>
</nav>

tabs.ts

public activeLink  = 0;

Upvotes: 0

Views: 651

Answers (1)

Meqwz
Meqwz

Reputation: 1491

You don't define activeLink by index, you define it by value:

  links = ['First', 'Second'];
  activeLink = this.links[0];

Please see the official Stackblitz from Angular.

Upvotes: 1

Related Questions