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

Issue

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

https://stackblitz.com/edit/angular-jmitne-mvbxcm?file=app/expansion-overview-example.ts

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.

Solution

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.