CODEWITHSUNDEEP
angularangular-material
eddyuk
eddyuk

Reputation: 4190

Toggle button not to trigger panel expansion

I want to place toggle buttons in description section of expansion panel. When they are interacted with the expansion panel reacts. How can I prevent expansion panel triggering when interacting with toggle buttons? I provided and example here https://angular-ivy-he4grl.stackblitz.io

Upvotes: 0

Views: 115

Answers (1)

west efan
west efan

Reputation: 609

Your event bubbles up to the panel header, to prevent this bubbling you can stop the propagation of the event with event.stopPropagation(). In your case i simply added a click event to each button as such:

<mat-button-toggle
  value="bold"
  (click)="$event.stopPropagation()"
>
    Bold
</mat-button-toggle>

Modified version of your code: https://stackblitz.com/edit/angular-ivy-jjtcyj

Upvotes: 1

Related Questions