[Fixed] Angular Mat Expansion Panel How to stop the unwanted triggering of event.


I am facing a problem with the mat expansion panel. See stackblitz


I added a console log for the click of Section 2.

Steps: Click On section 2 to expand and click on the paragraph text, the click event gets invoked.
we can see this in console logs
This is a big problem for me, as my real-time applications hit DB

Question: How to stop this unwanted triggering of events.


Instead of listening on a click  event, you can listen to opened and closed events.

<mat-expansion-panel #panel2 [hideToggle]="hideToggle" [disabled]="disabled" (opened)="print($event);" (closed)="print($event);">

In this way, you can avoid click events being triggered from the panel’s children elements.

Leave a Reply

(*) Required, Your email will not be published