Skip to main content

angular material - Badge position before & below after

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - Badge position before and below after
</h2>


<h3>Badge position before</h3>
<button 
  mat-raised-button 
  matBadge="8" 
  matBadgeColor="primary" 
  matBadgePosition="before">
    Material Badge
</button>

<h3 style="margin-top:40px;">
  Badge position below after
</h3>
<button 
  mat-raised-button 
  matBadge="8" 
  matBadgeColor="accent" 
  matBadgePosition="below after">
    Material Badge
</button>
app.module.ts [import] 

import { MatBadgeModule } from '@angular/material/badge'
import { MatButtonModule } from '@angular/material/button'
More Angular tutorials
Labels: