Angular Material Badge

By Arvind Rai, February 21, 2021

Angular Material Badges are a status descriptor for UI elements. A Badge is a combination of small circle and a number or short set of characters. A Badge appears in proximity to another object such as text with a Badge, button with a Badge and icon with a Badge.
To work with Badge, we need to import MatBadgeModule in our application module.

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

Find the directives provided by MatBadgeModule.
matBadge: The content of the badge such as number or sort set of characters.
matBadgePosition: Sets position and accepts any combination of 'above'|'below' and 'before'|'after'.
matBadgeSize: Sets the size of the badge i.e. 'small', 'medium', or 'large'.
matBadgeColor: Sets the color i.e. 'primary', 'accent', or 'warn'.
matBadgeDisabled: Boolean value to disable/enable the badge.
matBadgeHidden: Boolean value to hide and show the badge.
matBadgeOverlap: Boolean value to decide if badge should overlap its content or not.
matBadgeDescription: Sets a message used to describe the decorated element via aria-describedby.

Technologies Used
matBadge
matBadgePosition
matBadgeSize
matBadgeColor
matBadgeDisabled
matBadgeHidden
matBadgeOverlap
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

matBadge

1. With text

<span matBadge="5">Text</span>

In the above code badge is as a number. We can also use badge as a set of sort characters.

<span matBadge="xy">Text</span>

2. With button

<button mat-raised-button matBadge="10"> Button </button>
<button mat-raised-button matBadge="ab"> Button </button>

3. With icon

<mat-icon matBadge="10" >home</mat-icon>
<mat-icon matBadge="pq">home</mat-icon>

matBadgePosition

The matBadgePosition defines the position of a badge around the object. The position can be any combination of 'above'|'below' and 'before'|'after'. For example-

matBadgePosition='above'
matBadgePosition='above before'
matBadgePosition='below before'

'above after' is the default value for matBadgePosition.
Find the code.

<span matBadge="5" matBadgePosition="below before">Text</span>
<button mat-raised-button matBadge="10" matBadgePosition="before"> Button </button>
<mat-icon matBadge="15" matBadgePosition="below after">home</mat-icon>

matBadgeSize

The matBadgeSize defines the size of the badge. The size can be 'small', 'medium', or 'large'.

<span matBadge="5" matBadgeSize="small">Text</span>
<button mat-raised-button matBadge="10" matBadgeSize="medium"> Button </button>
<mat-icon matBadge="15" matBadgeSize="large" matBadgePosition="below">home</mat-icon>

matBadgeColor

The matBadgeColor defines the color of a badge. It can be 'primary', 'accent', or 'warn'.

<span matBadge="5" matBadgeColor="primary" matBadgeSize="small">Text</span>
<button mat-raised-button matBadge="10" matBadgeColor="accent"> Button </button>
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>

matBadgeDisabled

The matBadgeDisabled is used to disable/enable the badge. It accepts Boolean value. Default is false.
Suppose we have following property in our component.

badgeDisabled = true;

Find the HTML template code.

<span matBadge="5" matBadgeSize="small" [matBadgeDisabled]="badgeDisabled">Text</span>
<button mat-raised-button matBadge="10" [matBadgeDisabled]="badgeDisabled"> Button </button>
<mat-icon matBadge="15" matBadgeColor="warn" [matBadgeDisabled]="badgeDisabled">home</mat-icon>

matBadgeHidden

The matBadgeHidden is used to hide and show the badge. It accepts Boolean value. Default is false.
Suppose we have following property in our component.

badgeHidden= true;

Find the HTML template code.

<span matBadge="5" matBadgeSize="small" [matBadgeHidden]="badgeHidden">Text</span>
<button mat-raised-button matBadge="10" [matBadgeHidden]="badgeHidden"> Button </button>
<mat-icon matBadge="15" matBadgeColor="warn" [matBadgeHidden]="badgeHidden">home</mat-icon>

matBadgeOverlap

The matBadgeOverlap decides if badge should overlap its content or not. It accepts Boolean value. The default value is true.
Suppose we have following property in our component.

badgeOverlap = false;

Find the HTML template code.

<span matBadge="5" matBadgeSize="small" [matBadgeOverlap]="badgeOverlap">Text</span>
<button mat-raised-button matBadge="10" [matBadgeOverlap]="badgeOverlap"> Button </button>
<mat-icon matBadge="15" matBadgeColor="warn" [matBadgeOverlap]="badgeOverlap">home</mat-icon>

Complete Example

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  badgeDisabled = true;
  badgeHidden = true;
  badgeOverlap = false;

  toggleBadgeDisabled() {
    this.badgeDisabled = !this.badgeDisabled;
  }
  toggleBadgeHidden() {
    this.badgeHidden = !this.badgeHidden;
  }
  toggleBadgeOverlap() {
    this.badgeOverlap = !this.badgeOverlap;
  }    
}

app.component.html

<h3>matBadge</h3>
<p>
  <span matBadge="5">Text</span>
</p>
<p>
  <button mat-raised-button matBadge="ab"> Button </button>
</p>
<p>
  <mat-icon matBadge="pq">home</mat-icon>
</p>

<h3>matBadgePosition</h3>
<p>
  <span matBadge="5" matBadgePosition="below">Text</span>
</p>
<p>
    <button mat-raised-button matBadge="10" matBadgePosition="before"> Button </button>
</p>
<p>
  <mat-icon matBadge="15" matBadgePosition="below after">home</mat-icon>
</p>

<h3>matBadgeSize</h3>
<p>
  <span matBadge="5" matBadgeSize="small">Text</span>
</p>
<p>
  <button mat-raised-button matBadge="10" matBadgeSize="medium"> Button </button>
</p>
<p>
  <mat-icon matBadge="15" matBadgeSize="large" matBadgePosition="below">home</mat-icon>
</p>

<h3>matBadgeColor</h3>
<p>
  <span matBadge="5" matBadgeColor="primary" matBadgeSize="small">Text</span>
</p>
<p>
  <button mat-raised-button matBadge="10" matBadgeColor="accent"> Button </button>
</p>
<p>
  <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
</p>

<h3>matBadgeDisabled</h3>
<p>
  <button mat-raised-button matBadge="10" [matBadgeDisabled]="badgeDisabled" (click)="toggleBadgeDisabled()">
     Button 
  </button>
</p>

<h3>matBadgeHidden</h3>
<p>
  <button mat-raised-button matBadge="10" [matBadgeHidden]="badgeHidden" (click)="toggleBadgeHidden()">
     Button 
  </button>
</p>

<h3>matBadgeOverlap</h3>
<p>
 <button mat-raised-button matBadge="10" [matBadgeOverlap]="badgeOverlap" (click)="toggleBadgeOverlap()">
    Button 
 </button>
</p>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatBadgeModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.