1

I have added a (click) handler on icon inside mat-tab > mat-tab-label

But the problem is its not getting triggered when I click on the mat-icon

Stackblitz

Code:

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third">
    <ng-template mat-tab-label>
      <mat-icon (click)="alertRef()" class="example-tab-icon">delete</mat-icon>
      Third
    </ng-template>
  </mat-tab>
</mat-tab-group>
dasfdsa
  • 7,102
  • 8
  • 51
  • 93

1 Answers1

1

Inside each tab of your mat-tab-group, there's an element with class mdc-tab__content by default this element has a pointer-events: none property. You can easily target this element and use pointer-events: all instead.

Something like this:

(In your SCSS file)

:host {
   ::ng-deep {
     .mat-mdc-tab-group .mat-mdc-tab .mdc-tab__content { pointer-events: all; }
   }
}
WSD
  • 3,243
  • 26
  • 38
  • add opacity: initial; to the css to get the button not to look disabled. i made a global css like this ```.mdc-tab.mat-mdc-tab:has(.fake-disabled){ opacity: initial; .mdc-tab__content { pointer-events: all; } }``` and put a class on the button called fake-disabled – Lys Jun 23 '23 at 16:36