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.

<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.

1 Answers

ConnorsFan On Best Solutions

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>
  1. 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.