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>

CodePudding user response：

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.

CodePudding user response：

You could suround the badge by a span and add the click event listener to it:

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