使用 mat-tab-group 以编程方式在角度2材料中选择 mat-tab

UPDATE (using newest angular+material)

there are multiple ways..

1. possible solution, using two-way databinding

<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

public demo1TabIndex = 1;
public demo1BtnClick() {
const tabCount = 3;
this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;
}

2. possible solution, using template-variable and pass through our click-function

<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

public demo2BtnClick(tabGroup: MatTabGroup) {
if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;


const tabCount = tabGroup._tabs.length;
tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

3. possible solution, using @ViewChild

<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

@ViewChild("demo3Tab", { static: false }) demo3Tab: MatTabGroup;


public demo3BtnClick() {
const tabGroup = this.demo3Tab;
if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;


const tabCount = tabGroup._tabs.length;
tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

live-demo: https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts

In case it helps anyone, it is also possible to set selectedIndex on the MatTabGroup in your component.

If your HTML has: <mat-tab-group #tabs>, you can get a reference to it in the component using @ViewChild('tabs') tabGroup: MatTabGroup;.

Then you can do this.tabGroup.selectedIndex = newIndex; in the OnInit function, or elsewhere.

I had the same issue and I tried the above answers but they are not helping. Here is my solution:

In my typescript code, first, declare a variable:

selected = new FormControl(0); // define a FormControl with value 0. Value means index.

then, in the function:

changeTab() {
this.selected.setValue(this.selected.value+1);
} //

in the html,

 <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
<mat-tab label="label0">0</mat-tab>
<mat-tab label="label1">1</mat-tab>
<mat-tab label="label2">2</mat-tab>
<mat-tab label="label3">3</mat-tab>
<mat-tab label="label4">4</mat-tab>
<mat-tab label="label5">5</mat-tab>
</mat-tab-group>


<button (click)="changeTab()">ChangeTab</button>

I also had similar issue. In my case I needed to show the tab the user was there before he left the component. I solved this by stuffing the current selected tab index in a service.

On HTML template I have this:

<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">

Implementation of onTabChange and getSelectedIndex are as follows:

    getSelectedIndex(): number {
return this.appService.currentTabIndex
}


onTabChange(event: MatTabChangeEvent) {
this.appService.currentTabIndex = event.index
}

My service code looks like this:

export class AppService {
public currentTabIndex = 1  //default tab index is 1
}

I'm using angular 10 and make my mat-options with ngFor; in my case no one of the solutions didn't work and finally i found the tabIndex is the index of object in list that we have ngFor on it;

<mat-tab-group mat-align-tabs="start" style="width: 100%;text-align: start;overflow: hidden"
(selectedTabChange)="setNodeInfo($event)" [(selectedIndex)]="selectedIpIndex">
<mat-tab *ngFor="let nodeTab of nodeList" [tabIndex]="nodeTab.id">
<ng-template mat-tab-label>
<label>\{\{nodeTab.ip}}</label>
<mat-icon class="close-btn" style="font-size: medium;z-index: 100" (click)="tabClose(nodeTab)">close
</mat-icon>
</ng-template>
</mat-tab>
</mat-tab-group>

as you see i get the each tabIndex value in html like this:

[tabIndex]="nodeTab.id"

but it doesn't work and get index of position in list by its own choice.

and in my ts file i fill selectedIpIndex like this :

this.selectedIpIndex = this.nodeList.indexOf(node);

it's worked for me

    isActiveTab = 0 // First tab
isActiveTab = 1 // Second Tab
        

<mat-tab-group mat-align-tabs="start"
(selectedTabChange)="onTabChanged($event.index)"
[selectedIndex]="isActiveTab" >
        

<mat-tab label="One"> </mat-tab>
<mat-tab label="Two"> </mat-tab>
            

</mat-tab-group>