CODEWITHSUNDEEP
angularangular-material2
Runtime Terror
Runtime Terror

Reputation: 6752

How to get the active tab In Angular Material2

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

Upvotes: 55

Views: 126803

Answers (6)

Benu Gopal Shanker Kulshrestha
Benu Gopal Shanker Kulshrestha

Reputation: 1

tabs.component.ts
import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
import { MaterialModule } from '../material/material.module';

@Component({
  selector: 'app-tabs',
  standalone: true,
  imports: [MaterialModule],
  templateUrl: './tabs.component.html',
  styleUrl: './tabs.component.scss'
})
export class TabsComponent implements AfterViewInit {

  selectedIndex: number | null = null;

  constructor(private cdr: ChangeDetectorRef) {}

  logChange(index: number | null) {
    if(index !== null) {
      this.selectedIndex = index;
      console.log(index);
    }
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.selectedIndex = 0;
      this.cdr.detectChanges();
    });
  }

}
tabs.component.html
<!-- tabs allow us to organise content intercepted view where only one view is visible at a given time -->
 <!-- want to perform in the tabs when we changing the tabs -->
<mat-tab-group #tabRef (selectedTabChange)="logChange(tabRef.selectedIndex)">
    <mat-tab label="Angular">Angular Content</mat-tab>
    <mat-tab label="React">React Content</mat-tab>
    <mat-tab label="Vue">Vue Content</mat-tab>
</mat-tab-group>
<!-- if we want to know which tab is active at any point of time -->
<!-- {{tabRef.selectedIndex}} -->
{{selectedIndex}}

general solution of the problem as per the latest versions of the angular material and angular respectively.

Upvotes: 0

Nikhil
Nikhil

Reputation: 1018

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
}

Upvotes: 0

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17452

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

Upvotes: 1

developer033
developer033

Reputation: 24894

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

Upvotes: 97

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

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

Upvotes: 12

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

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

Upvotes: 22

Related Questions