Angular material mat-tab-label

Question

I want to access name of the sequence from selectedTabChange event

<mat-tab-group (selectedTabChange)="onSequenceChangeEvent($event, sequence)">

<mat-tab  *ngFor="let sequence of sequencesForSelectedScope">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

In this event i can access following: sequenceEvent.tab.templateLabel.context but this context is undefined. How can i set this to e.g. sequence.sequenceName?

Answer 1

There is a way to do this but it's a bit of a hack. If you assign your 'sequence' data to the 'label' input of the tab, you can get it from the MatTabChangeEvent. This only works because you are using template labels so you can 'repurpose' the label input:

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

<mat-tab *ngFor="let sequence of sequencesForSelectedScope" [label]="sequence">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

onSequenceChangeEvent(event: MatTabChangeEvent) {
  console.log(event.tab.textLabel.sequenceName);
}