Mat-tab click event

Question

I am using angular universal with angular material 2, and therefore I have only managed to get clicks to work (as far as user events is concerned). Is it possible to attacth a (click) attribute from a tab to change the index and pull dynamic data.

I used to have a method getAlbums which retrieves an array of pictures on selectedIndexChange, now that this is not an option is there another way of doing it?

The only other way is to have a separate button to control the tab index.

Answer 1

I can get click event or mouse event with below code

Html

<mat-tab-group disableRipple="true" [selectedIndex]="selectedPageIndex">
  <mat-tab *ngFor="let tabData of tabsData;">
    <ng-template mat-tab-label>
      <div (mousedown)="navigate($event, tabData)"> <!-- From here you can get all event and can pass data from *ngFor -->
        <mat-icon *ngIf="!!tabData.icon"> {{ tabData.icon }}</mat-icon>
        <span *ngIf="!tabData.onlyIcon"> {{ tabData.name }}</span>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Style

.mat-tab-label {
  padding: 0;
  height: 40px;
}
.mat-tab-label-content {
  padding: 0 8px;
}
.mat-tab-label-content > div {
  line-height: 40px;
}