How to make angular material expansion panel only open programatically and not when the panel header is clicked

Question

I have an mat-expansion-panel, which opens when the mat-expansion-panel-header is clicked. Is there a way to disable this behavior? I want to open the expansion panel elsewhere using its open method, and disable the ability to open it by clicking the header.

Answer 1

Demo

This is not something that is supported natively. Though you can quickly build a work-around in a few steps:

First you need to remove the indicator since it is not something the user will be able to interact with:

<mat-expansion-panel #panel1 [hideToggle]="true">

Note that I also gave the component a name in order to get its reference later on.

To prevent user interactions we will add a css class prevent-click:

<mat-accordion class="prevent-click">

.prevent-click{
  pointer-events: none;
}

If you want the user to be able to interact with the content of the panels:

<button class="authorize-click" mat-raised-button>test</button>

.authorize-click{
  pointer-events: auto;
}

NB: You can wrap the content of the expansion panel with this class to allow any interaction within.

---

To interact with the panels you use the reference of the panels (see above). You can call 3 functions

• open()
• close()
• toggle()

<button (click)="panel1.toggle()">Toggle panel 1</button>

---

If you want to interact with the panels from your component, you need to get their references using ViewChild().

Example:

@ViewChild('panel1') firstPanel: MatExpansionPanel;

public toggleFirstPanel(){
  this.firstPanel.toggle();
}