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

user_10656503 0
Viewed 28559

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>

angular-material angular html javascript
5 Answers

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

user_79213990

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

user_54567890

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

user_57235650

Closing the panel immediately after the default behaviour works for me.

<mat-expansion-panel #panel [hideToggle]="true" (opened)="doSomething()">
<mat-expansion-panel-header>
  <mat-panel-title>Menu</mat-panel-title>
</mat-expansion-panel-header>

TS file

@ViewChild("panel") panel;

doSomething() {
  //do stuff
  this.panel.close();
}
user_41944060

you can disable toggle partially , for example prevent toggle only in button

<mat-expansion-panel-header>
    <mat-panel-title>
        <span>
           Text
        </span>
        <button class="mat-button course-btn"(click)="onChangeCourseBotton($event)">disabled area</button>
    </mat-panel-title>
</mat-expansion-panel-header>


  onChangeCourseBotton(e: Event) {
    e.stopPropagation();
  }

You can also do this inline:

   <mat-expansion-panel-header>
      <mat-panel-title>
         <span>
            Text
         </span>
         <button class="mat-button course-btn"(click)="$event.preventDefault()">disabled area</button>
      </mat-panel-title>
   </mat-expansion-panel-header>
user_165904570
Related