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.
Good Tutorial
👍