How to prevent toggling mat-expansion-panel by clicking mat-expansion-panel-header?

Issue

I know mat-expansion-panel-headers is a button. clicking anywhere on that button toggles the expansion opens/closes. But I don't want to let users click anywhere on the header and open it. There should be a small button. One click on that button will open/close the expansion panel. How can I do that?

I have tried this, but it didn't work.

<mat-expansion-panel>
<mat-expansion-panel-header (click)="$event.preventDefault()">
  <mat-panel-title>
    MENU
  </mat-panel-title>
</mat-expansion-panel-header>

Solution

you can play with toggle function:

<mat-expansion-panel >
<mat-expansion-panel-header #panelH (click)="panelH._toggle()">
  <mat-panel-title>
   <i class="material-icons app-toolbar-menu" (click)="panelH._toggle()">menu </i>
  </mat-panel-title>
  <mat-panel-description>

  </mat-panel-description>
</mat-expansion-panel-header>

see stackblitz

Answered By - amir azizkhani