load function in mat-tab when selected - Angular 2 material using mat-tab-group

Question

How can I add action to mat-tab when selected ?

In my case i want to set laodCard=true when the card is selected.

here is the code i wrote, but action (click) does not work

<mat-tab label="second tab" (click)="loadCards(true)">
       <app-card [load]="laodCard" >
       </app-card>
</mat-tab>

score 2 · Accepted Answer · answered Apr 08 '20 at 10:58

Have a look at the documentation for mat-tab-group: https://material.angular.io/components/tabs/api#MatTabGroup

You can set a listener for changes of tabs on the tab-group level. Inside that listener you can then specify what should happen for a switch to any tab.

Here is a little example:

Template:

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)">
    <mat-tab label="second tab">
       <app-card [load]="laodCard" >
       </app-card>
    </mat-tab>
</mat-tab-group>

Component:

import { MatTabChangeEvent } from '@angular/material/tabs';

// ...

onLinkClick(event: MatTabChangeEvent) {

  //console log all the data that the event returns
  console.log('event => ', event);
  console.log('index => ', event.index);
  console.log('tab => ', event.tab);


  //replace the string here with the data returned by the last console.log
  if(event.tab == "your selected tab") {
      this.loadCards(true); 
  }
}

load function in mat-tab when selected - Angular 2 material using mat-tab-group

1 Answers1