First of all, let’s style our tab content a little bit more, to center our text inside every tab:

mat-tab-group {
    text-align: center;
}
 
mat-tab-group p {
    padding-top: 20px;
}

----------------------------------
This control has its own events. The selectedTabChange event is emitted when the active tab changes. The focusChange event is emitted when the user navigates through tabs with a keyboard navigation.

So, let’s use the selectedTabChange event:

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

And we need to modify the home.component.ts file:

public executeSelectedChange = (event) => {
    console.log(event);
  }