Как предотвратить переключение mat-extension-panel, нажав mat-extension-panel-header?

Question

Я знаю, что mat-extension-panel-headers - это кнопка.нажатие в любом месте на эту кнопку переключает расширение открывается / закрывается.Но я не хочу, чтобы пользователи щелкали в любом месте заголовка и открывали его.Там должна быть маленькая кнопка.Один щелчок по этой кнопке откроет / закроет панель расширения.Как я могу это сделать?

Я пробовал это, но это не сработало.

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

Answer 1

Вы можете играть с функцией переключения:

<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>

см. stackblitz