Search code examples
javascriptangularangular-materialbadge

Angular Material Badge onclick

I have this element with badge and I would like to add onClick on the badge, but in this case the onClick reacts on the text click, how can I do it ONLY for the badge?

<div matBadge="i" matBadgeOverlap="false" (click)="onClick()">Text with badge </div>
Solution

  • This is an issue that was also raised once to the material team back in 2018 on GitHub.

    Answer:

    Badges are intended to be for displaying information only and aren't meant to be interactive. Introducing interactions on them would lead to accessibility problems, so this isn't something we would support.