How to get the active tab In Angular Material2

Question

I want to get which tab is active. I tried to use a @ViewChild decorator and accessing the element properties that way, but it returns null.

Component:

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'material-app',
  template: `
  <md-tab-group #tabGroup>
      <md-tab label="Tab 1">Content 1</md-tab>
      <md-tab label="Tab 2">Content 2</md-tab>
  </md-tab-group>
  `
})
export class AppComponent implements OnInit {

  @ViewChild('tabGroup') tabGroup;

  constructor() {
  }

  ngOnInit() {
    console.log(this.tabGroup); // MdTabGroup Object
    console.log(this.tabGroup.selectedIndex); // null
  }

}

Plunker Preview

developer033 · Accepted Answer · 2019-07-26T00:43:46.410

91

Well, I'm not sure if I understood well your question because, by default the index always starts counting from zero unless you set manually the [selectedIndex] property.

Anyway, if you really want to see which tab is selected on initialization you could implement the AfterViewInit interface and do the following:

export class AppComponent implements AfterViewInit, OnInit {

...

  ngAfterViewInit() {
    console.log('afterViewInit => ', this.tabGroup.selectedIndex);
  }
}

On other hand, if you want to check which tab is selected based on changes (what makes more sense), here you go:

HTML:

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

Component:

tabChanged(tabChangeEvent: MatTabChangeEvent): void {
  console.log('tabChangeEvent => ', tabChangeEvent);
  console.log('index => ', tabChangeEvent.index);
}

DEMO

edited Jul 26 '19 at 00:43

answered Jan 14 '17 at 23:55

developer033

24,267
8
82
108

1

The second case is what I was looking for, but the first one is useful to know too. Thank you @developer033! – Runtime Terror Jan 15 '17 at 09:28
Hi! I used this code and I've got a error that "this.tabGroup" is undefined. Only after onSelectChange Angular "see" this dom element. It's like ngAfterViewInit() doesn't work for me. Do you know what's going on? – Roberto Jul 26 '17 at 17:27
For the first option, how would you get the _name_ (instead of the index) of the tab that is automatically selected on initialization? – FiringBlanks Oct 21 '17 at 06:47
1

@FiringBlanks you mean the *label*? If so, you can just access `tabChangeEvent.textLabel`. – developer033 Oct 22 '17 at 00:50
1

Yes, the label, but I want to get it when the tab-group is first initialized, not listen for when the tabs are changed by the user. I need to know the label of the tab that the tab-group starts with. – FiringBlanks Oct 22 '17 at 02:38
@Budi I've changed the link. – developer033 Jul 26 '19 at 00:44

score 22 · Answer 2 · edited Apr 06 '18 at 07:01

22

According to Material documentation Angular Material tabs output an event on tab change @Output() selectedTabChange: EventEmitter<MatTabChangeEvent>

Your Template:

<mat-tab-group (selectedTabChange)="tabChanged($event)">
  <mat-tab>
    <ng-template mat-tab-label>Tab 1</ng-template>
    Tab Content
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>Tab 2</ng-template>
    Tab Content
  </mat-tab>
</mat-tab-group>

Your Typescript:

import { MatTabChangeEvent } from '@angular/material';

public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    console.log(tabChangeEvent);
}

edited Apr 06 '18 at 07:01

xsami

1,312
16
31

answered Nov 21 '17 at 14:59

Uliana Pavelko

2,824
28
32

1

how can you know the tab index when the page loads?. Currently when the page load, your method does not log the index. Any help with this is highly appreciated as I have been stuck for a while. Thank you for the help. – Maddy Jun 21 '18 at 00:11
Thats right selectedTabChange only emits tabChangeEvent only on click when tub is changed. Not sure if there is a way that will work out of the box. You could try @ViewChild('tabGroup') tabGroup; ngAfterViewInit() { console.log(this.tabGroup.selectedIndex); } – Uliana Pavelko Jun 21 '18 at 13:28

score 12 · Answer 3 · edited Nov 13 '18 at 21:59

"@angular/material": "^6.2.1". The way to get selected tab index on-load (after template has loaded) and when the tab is focused.

my.component.ts

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('tabGroup') tabGroup;

    ngAfterViewInit() {
      console.log(this.tabGroup.selectedIndex);
    }

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
      console.log(tabChangeEvent);
    }
}

my.component.html

<mat-tab-group #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="1">
    <mat-tab>
        <ng-template mat-tab-label>Tab 1</ng-template>
        Tab Content
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>Tab 2</ng-template>
        Tab Content
    </mat-tab>
</mat-tab-group>

score 1 · Answer 4 · answered Oct 22 '20 at 13:48

This is how you can get active index of active angular material tabs

.html file

<div>    
<mat-tab-group #tabRef (selectedTabChange)="logChange(tabRef.selectedIndex)">
  <mat-tab label="ALL"></mat-tab>
  <mat-tab label="Delivered"></mat-tab>
  <mat-tab label="Pending"></mat-tab>
  <mat-tab label="Cancelled"></mat-tab>
</mat-tab-group>    
</div>

.ts file

logChange(index)
{
  console.log(index);
}

Don't forget to add import in app.module.ts file

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

score 0 · Answer 5 · answered May 07 '21 at 10:53

By default tab with index 0 is shown by mat-tab-group. later on as and when the other tab is selected, the index also changes. This can be detected by MatTabChangeEvent

HTML Content

    <mat-tab-group (selectedTabChange)="onTabChange($event)">
    
        <mat-tab label="First Tab">
         <p>Hello, Tab 0</p>
        </mat-tab>
    
        <mat-tab label="Second Tab">
         <p>Hello, Tab 1</p>
        </mat-tab>
    
        <mat-tab label="Third Tab">
         <p>Hello, Tab 2</p>
        </mat-tab>
    
    </mat-tab-group>

.ts file content

onTabChange(event : MatTabChangeEvent) {
    
    console.log(event.index);
    // do something based on selected tab index
}

How to get the active tab In Angular Material2

5 Answers5

Linked

Related