angular material - How to use Badge with text

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to use Badge with text
</h2>


<h3>Text with a badge: Badge is not overlapped</h3>
<span 
  matBadge="4"
  matBadgeOverlap="false">
    My Score
</span>


<h3 style="margin-top:50px;">
  Text with a badge: Badge is overlapped
</h3>
<span 
  matBadge="8"
  matBadgeOverlap="true">
    Innne's Score
</span>

app.module.ts [import]

import { MatBadgeModule } from '@angular/material/badge'

More Angular tutorials

• angular material - How to change Slide toggle checked color
• angular material - How to change Badge size
• angular material - How to use custom Badge size
• angular material - How to show custom color in Badge
• angular material - Open Accordion multiple panels at once
• angular material - How to disable a panel in Accordion
• angular material - How to hide Accordion panels toggle icon
• angular material - Determine an Expansion Panel is opened or closed
• angular material - Determine an Expansion Panel is disabled or enabled
• angular material - How to toggle Expansion Panel expanded state
• angular material - How to use List
• angular material - List items separator
• angular material - How to generate List items from array
• angular material - How to use List dense layout mode
• angular material - How to use Navigation List