Angular Material 2 Tab Dynamic Content

Question

I am trying to make an http call to the Facebook API when a tab is clicked (this is what the getAlbum method does). I tried adding a (click) attribute to the mat-tab element but it doesn't activate. This led me to putting a (onSelect) attribute on the mat-group , however the data I need is now out of scope.

<mat-tab-group (selectedTabChange)="getAlbum(header.id)">
  <mat-tab *ngFor="let header of bachataAlbumHeaderNames" #albumId="header" label="{{header.name}}={{header.id}}">
    <div *ngFor="let image of bachataPicsArray; let i = index">

      <img flex (mouseenter)="mouseEnter($event, i)" [ngClass]="hoveredId === i ? depth5: depth1" id="{{image.id}}" (mouseleave)="mouseLeave($event)"
       class="gallery_pic" src="{{image.image}}" alt="Bachadiff Cardiff Bachata class picture of people enjoying the dance" />
    </div>
  </mat-tab>
</mat-tab-group>

Answer 1

Since the indices of the tabs correspond to the bachataAlbumHeaderNames array, you can access the header id via the active tab index with the selectedIndexChange output event:

HTML template:

<mat-tab-group (selectedIndexChange)="getAlbum($event)">

Typescript class:

getAlbum(tabId) {
  const headerId = this.bachataAlbumHeaderNames[tabId].id;
  // API calls...
}

I've created a stackblitz example .