Create (click) event on MatTab Material

I don't have the same problem as you had. All I needed was a simple click event on a mat-tab. I change the route on a click event but the click event did not bind to the tab. I did some research and what you can do is create a custom label on which you can put the click event. For example...

<mat-tab>
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label</span>
    </ng-template>
</mat-tab>

This will work if you create the tab dynamically. To expand on your example...

<mat-tab *ngFor="let i of [1, 2, 3]">
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label {{i}}</span>
    </ng-template>
</mat-tab>

The only problem I had was with the css for the span. It doesn't have any padding so you actually have to click on the span itself to make the event work. If you click outside it but within the tab, the tab is going to change but the event won't fire.

To fix that, make the padding bigger on this span. For example,

.custom-label { padding: 15px 0 15px 0; }

This one, for example worked for me but there was still room on the left and right side that the click didn't wan't to fire. I din't solve that one.


Isn't it possible to add simple click event on dynamically created tabs? - no i think, it isn't possible, but you can use (selectedTabChange) on <mat-tab-group> as:

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

The event-Object holds an index, so you can do something like this:

yourFn($event){
    this.fetchAccounts(this.banks[$event.index].id)
}

Example: https://stackblitz.com/edit/angular-xurhan