Badge in Angular Material UI

In this tutorial, we will learn how to create a badge using Angular Material UI in Angular 15. Badges are used to display an additional piece of information such as a notification count on an icon or button.

Creating a Notify Badge

To create a notify badge in Angular using Material UI, we can use the <mat-badge> directive. First, we need to import the MatBadgeModule in our Angular module.

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

@NgModule({
  ...
  imports: [MatBadgeModule],
  ...
})
export class AppModule { }
    
  

Once we have imported the MatBadgeModule, we can use the <mat-badge> directive in our HTML template to create a badge. For example:

    
<button mat-button [matBadge]="5" matBadgeColor="accent" matBadgeSize="small" >
  Notifications
</button>
    
  

In this example, we have a button with the text “Notifications” and a badge with a count of 5. The badge color is set to “accent” and the size is set to “small”.

Conclusion

Angular Material UI provides a simple and easy way to create badges in Angular applications. By using the <mat-badge> directive, we can easily add notifications and additional information to our application interface. In this tutorial, we have learned how to create a notify badge using Angular Material UI in Angular 15.