What should I do to be able to run my function after I click on a mat-tab?-CodePudding

I have a function in my component:

aaa(  ) {
    console.log('mat-tab')
}

I want to run my function when I click on a mat-tab I tried this code:

<mat-tab label="Tools" (click)="aaa( )">

</mat-tab>

but it is not working.

What should I do to be able to run my function after I click on a mat-tab?

CodePudding user response：

Listen for tab change event and call respective functions accordingly

<mat-tab-group (selectedTabChange)="changeTab($event)">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

changeTab(evt: MatTabChangeEvent) {
    console.log(evt); //{index: 1, tab: MatTab}
    if (evt.index === 0) {
      //first tab active
    } else if (evt.index === 1) {
      //second tab active
    }
  }

Note: index is zero based