Angular Material 5: comment appeler une fonction lorsqu'un onglet est sélectionné (cliqué)?

Question

J'ai le code html suivant

<mat-tab label="Regular" (selectChange)="tabClick()"
                 (click)="tabClick()">
   <h1>Some more tab content</h1>
</mat-tab>

et c'est la fonction,

tabClick(){
    console.log('Tab clicked...');
}

mais ça ne semble pas s'appeler, pourquoi? Aucun des événements ci-dessus n'est renvoyé?

Answer 1

L'événement selectedTabChanged doit être attaché à <mat-tab-group> élément

<mat-tab-group (selectedTabChange)="tabClick($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

---

tabClick(tab) {
  console.log(tab);
}

Démo

Answer 2

Un événement doit être selectedTabChange à mat-tab-group

<mat-tab-group (selectedTabChange)="tabClick()">
    <mat-tab label="Regular">
       <h1>Some more tab content</h1>
    </mat-tab>
</mat-tab-group>