[Fixed] Angular expansion panel click anywhere on expanded mode, invokes mat-expansion click event


I am facing problem with mat expansion panel. See stackblitz


I added a console log for 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 hits DB

Question: How to stop this unwanted triggering of event.


Instead of listen on 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 event to be triggered from panel’s children elements.

Leave a Reply

(*) Required, Your email will not be published