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

Issue

I am facing problem with mat expansion panel. See stackblitz

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

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.

Solution

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.