Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty

I was trying to prevent tab change of mat-tab, if the form in currently active tab is dirty.

But I couldn't find a way to intercept the tab change event.

<mat-tab-group>

<mat-tab label="Tab 0" >

// Tab 0 Content

</mat-tab>

<mat-tab label="Tab 1" >

// Tab 1 Content

</mat-tab>

<mat-tab label="Tab 2" >

// Tab 2 Content

</mat-tab>

</mat-tab-group>


Even though there is a selectedTabChange event, we can't prevent tab change. we can only switch tab programatically after tab change.

Continue reading...