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

Solution 1

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

Solution 2

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);
}

Solution 3

"@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>

Solution 4

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';

View more solutions

Comments

[Runtime Terror]

The second case is what I was looking for, but the first one is useful to know too. Thank you @developer033!

[Roberto]

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?

[FiringBlanks]

For the first option, how would you get the name (instead of the index) of the tab that is automatically selected on initialization?

[developer033]

@FiringBlanks you mean the label? If so, you can just access tabChangeEvent.textLabel.

[FiringBlanks]

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.

[Maddy]

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.

[Uliana Pavelko]

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 <mat-tab-group #tabGroup> @ViewChild('tabGroup') tabGroup; ngAfterViewInit() { console.log(this.tabGroup.selectedIndex); }

[developer033]

@Budi I've changed the link.