angular material - How to change Badge position

app.component.html

<h2 style="padding-top:25px; padding-bottom:50px;">
  Angular Material - How to change Badge position
</h2>


<span 
  matBadge="7"
  matBadgeOverlap="false"
  matBadgeSize="large"
  matBadgePosition="after">
    Badge position after
</span>

<br/><br/><br/>

<span 
  matBadge="7"
  matBadgeOverlap="false"
  matBadgeSize="large"
  matBadgePosition="before">
    Badge position before
</span>

app.module.ts [import]

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

More Angular tutorials

• angular material - How to generate Tabs programmatically
• angular material - How to create & add Tab programmatically
• angular material - How to delete Tab programmatically
• angular material - How to use Slider
• angular material - Slider step, minimum & maximum value
• angular material - Tick interval with step in Slider
• angular material - How to invert Slider
• angular material - How to use Slider input event
• angular material - How to use Slide toggle
• angular material - How to change Slide toggle checked color
• angular material - How to use Badge with text
• angular material - How to toggle Badge visibility
• angular material - How to show Badge in a button
• angular material - How to show Badge with icon
• angular material - Badge position before & below after