How To Implement Notification Badge Using Angular Material

Introduction:

We will learn how to integrate message or notification badge numbers in the Angular application as well as how to personalize them using Material UI in this Angular Material tutorial.

In order to show or highlight that there is information that can be verified on an activity, badges are meant to display the count in numbers or characters above another element, such as a button or symbol.

A badge function is modeled after the program icons found on Android or iOS devices, which display the number of notifications associated with a certain application. In most cases, badges are introduced to draw user attention while also providing information regarding intensity in the form of a number count.

Create a New Angular Application:

Run the following ng command to create a new Angular project

ng new angular-material-badges

Install Material Package:

Install the Material UI library by running the following ng command after establishing the Angular project.

ng add @angular/material

Update App Module File:

We must import the necessary API modules in order to use Badges in the Angular app.

Open the app.module.ts file then import the MatBadgeModule then add in the imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    MatBadgeModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Material Badges:

Badges may be quickly added to any element in the template HTML by adding the matBadge attribute after importing the MatBadgeModule.

add below code in app.component.html file

<p>
    <button matBadge="8" mat-raised-button color="warn">
      Action
    </button>
  </p>

  <p>
    <mat-icon matBadge="5">notifications</mat-icon>
  </p>

Conclusion:

Utilizing the Material MatBadgeModule API, badges may be quickly implemented in Angular applications. To manage its behavior in accordance with the project requirements, they support a variety of attributes.

OUTPUT: