To add a badge to an element, just apply the mat-badge attribute to it and give it a string or numeric value that you want to display. This will place the badge on the right side of the element.
To add a badge to an element, just apply the mat-badge attribute to it and give it a string or numeric value that you want to display. This will place the badge on the right side of the element.
<element mat-badge="5"></element>
Implementation
To begin, add the MatBadgeModule to your project. Go to the app module TypeScript file, add the import statement, and add it to the app.
Add Badges
To add an badge to a button, we would apply the matBadge attribute to it and set its value.
<button matBadge="1">Badge Example</button>
However, instead of using a static value, we can bring in a variable from the Typescript File. This allows us to programmatically change the value.
TypeScript
var myVariable = "2";
HTML
<button matBadge="{{myVariable}}">Badge Example</button>
Changing the badge
To place the badge on the left side, apply the matBadgePosition attribute and set the value to before.
<button
Moreover, we can change the size, visibility, and color.
matBadgeSize="small | medium | large"
If we want a smaller badge, we would put small or if we want a larger badge, we will put large. Medium is the default size.
<button
Sometimes we may want to hide the badge. To hide the badge, use the [matBadgeHidden] attribute and set it to true if we want to hide it or false if we want to show it.
<button
Lastly, to change the color, apply the matBadgeColor attribute and set it to either primary, accent, or warn.
matBadgeColor="primary| accent| warn"
<button