8. Additional Mat-Tab Features

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