Angular Material Expansion panel, expand only on button click

Question

By default Angular expansion panel expands when user clicks anywhere in the title. However I want to update this functionality so that only right side arrow button should trigger an expansion event. Can someone help me for achieving this? Below is a sample code. https://stackblitz.com/edit/angular-exp-panel-click

<button (click)="panel1.toggle()" mat-raised-button>Toggle panel 1</button>
<button (click)="panel2.toggle()" mat-raised-button>Toggle panel 2</button>

Buttons outside mat-accordion are properly expanding desired panels, however same buttons when added inside title are not working as expected.

Answer 1

You can either:

1. Remove the click event handler completely. This works because the button catches the mouse click, while the rest of the panel doesn't since it has the pointer-events: none style attribute. The click event is then propagated to the panel, which toggles the expansion.

<button class="toggle-panel" mat-raised-button>

2. Call $event.stopPropagation() in the event handler, to prevent the panel from also receiving the click event, which would toggle the expansion back to its original state.

<button class="toggle-panel" (click)="$event.stopPropagation(); panel2.toggle()" ... >

See this stackblitz for a demo.