Angular Material Tab Change Event

By Arvind Rai, March 20, 2021

Angular Material tabs are created as group of tabs using MatTabGroup whose selector is mat-tab-group. It has following events.
selectedTabChange: Event emitted when tab selection has changed.
selectedIndexChange: Event emitted when selected index of tab has changed.
focusChange: Event emitted when tab focus has changed within a tab group.
animationDone: Event emitted when body animation has completed.

The above events will emit in following order.
'focusChange' -> 'selectedIndexChange' -> 'selectedTabChange' -> 'animationDone'

Now let us discuss all the above events in detail.

Technologies Used
focusChange Event
selectedIndexChange Event
selectedTabChange Event
animationDone Event
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

`focusChange` Event

The focusChange event is emitted when tab focus has changed within a tab group.

@Output()
focusChange: EventEmitter<MatTabChangeEvent>

Find the sample example.
HTML code:

<mat-tab-group
  (focusChange)="myTabFocusChange($event)">
  ------
</mat-tab-group>

Component Code:

myTabFocusChange(changeEvent: MatTabChangeEvent) {
   console.log('Tab position: ' + changeEvent.tab.position);
}

`selectedIndexChange` Event

The selectedIndexChange event is emitted when selected index of tab has changed.

@Output()
selectedIndexChange: EventEmitter<number>

Find the sample example.
HTML code:

<mat-tab-group
  (selectedIndexChange)="myTabSelectedIndexChange($event)">
  ------
</mat-tab-group>

Component Code:

myTabSelectedIndexChange(index: number) {
   console.log('Selected index: ' + index);
}

`selectedTabChange` Event

The selectedTabChange event is emitted when tab selection has changed.

@Output()
selectedTabChange: EventEmitter<MatTabChangeEvent>

Find the sample example.
HTML code:

<mat-tab-group
  (selectedTabChange)="myTabSelectedTabChange($event)">
  ------
</mat-tab-group>

Component Code:

myTabSelectedTabChange(changeEvent: MatTabChangeEvent) {
   console.log('Index: ' + changeEvent.index);
}

`animationDone` Event

The animationDone event is emitted when body animation has completed.

@Output()
animationDone: EventEmitter<void>

Find the sample example.
HTML code:

<mat-tab-group
  (animationDone)="myTabAnimationDone()">
  ------
</mat-tab-group>

Component Code:

myTabAnimationDone() {
  console.log('Animation done.');
}

Complete Example

app.component.html

<mat-tab-group
  (focusChange)="myTabFocusChange($event)"
  (selectedIndexChange)="myTabSelectedIndexChange($event)"  
  (selectedTabChange)="myTabSelectedTabChange($event)"
  (animationDone)="myTabAnimationDone()">
  <mat-tab label="Tab One"> Content for Tab 1 </mat-tab>
  <mat-tab label="Tab Two"> Content for Tab 2 </mat-tab>
  <mat-tab label="Tab Three"> Content for Tab 3 </mat-tab>
</mat-tab-group>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
  }
  myTabFocusChange(changeEvent: MatTabChangeEvent) {
    console.log('Tab position: ' + changeEvent.tab.position);
  }  
  myTabSelectedIndexChange(index: number) {
     console.log('Selected index: ' + index);
  }
  myTabSelectedTabChange(changeEvent: MatTabChangeEvent) {
    console.log('Index: ' + changeEvent.index);
  }  
  myTabAnimationDone() {
    console.log('Animation done.');
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.