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

Question

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 1

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

Solution 2

amir's solution works in some cases but I was having some animation issues with the arrow. I found the solution here to be more consistent and overall I think its better:

Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

this for example will prevent the header expanding when clicking the checkbox

Solution 3

Prevent Clicking the toggle in perticular button in mat-expansion-panel-header.

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

using this you can prevent clicking on perticular element (click)="!exppanel._toggle()" it may help someone. Thank you....

Comments

[Janaka Bandara]

Nice! Also works on the mat-panel-description itself (in my case I had some buttons rendered inside mat-panel-description and clicks on those were unnecessarily toggling the panel state - possibly some kind of event bubbling - and stopPropagation on mat-panel-description stopped it; rather than having to do stopPropagation on each button separately)

[Parth Mansata]

This is more helpful in my case as with _panelH._toggle()_, the function in the (opened)='function1()' is even though called and just the panel is not expanded.

[roma2341]

Nice, because this solution works with mat-slide-toggle and stopPropagation does not work