How can I prevent a mat-expansion-panel from opening when clicked?

Question

I want to control my mat-expansion-panel solely with the panel's [expanded] input property. I am using NGRX as state management.

Therefore, I don't want the panel to open when clicked. Instead, I have my own click listener that will dispatch the right action that will lead to the panel to open.

How can I prevent it from opening when clicked? I tried (click)="$event.stopImmediatePropagation(); but it does not do the trick.

<mat-accordion [multi]="true">
  <mat-expansion-panel [expanded]="item.isOpen">
    <mat-expansion-panel-header (click)="togglePanel($event, item)">
        <!-- Header Content-->
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        <!-- Panel Content -->
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

Any ideas?

Daniel B Daniel B · Accepted Answer · 2019-11-08T09:25:36

There is not (from what I know) built in way to disable the click of the panels, thought there's a simple trick using only CSS to accomplish what you want.

You can set the style to pointer-events: none; to the <mat-expansion-panel> and it won't listen to any click events, and then you toggle it your way using your custom logic.

I made a StackBlitz example to demonstrate it.

How can I prevent a mat-expansion-panel from opening when clicked?

1 Answers