Updated April 18, 2023
Introduction to Angular Material Notification
In angular we can use Badges to show the notification using a material library, this is an in-build module provided by the material library which is very easy to use. handle and maintainable also. we can use Badges in place of notification, it shows the status of the element on the UI, which helps the user to keep of their activity as well and they can be aware of what have to do next also. It basically consists of a small circle that represents the number of actions that need to take or the status of some other functionality to the user. It is a very useful feature and can be easily implemented as well. In the coming section of the article, we will see the actual implementation of Badges which is used to show the notification in a material library, also detail steps to configure this in our application for beginners to understand it better.
Syntax:
As we know we have to make certain configurations in order to use Badges or notifications inside our application using material but with that, we have to follow particular syntax in order to create the UI for this, below see the syntax for better clarity;
<p>
<span matBadge="your number " matBadgeOverlap="false">Text you want to show</span>
</p>As you can see in the above syntax we are trying to use the ‘matBadge’ which is used to show and create our notification in an angular application using the material library. Also in the coming section, we will see a detailed explanation about the implementation and working of it.
How notification works in Angular material?
As of now we already know that notification in angular can be created easily using the Badges module provided by the material library. Also, it is a small circle which is used to represent the number of notifications we have for a particular user. This notification helps the user to identify their action, also sometimes this notification contains the action which needs to be taken in order to complete some process. We can show these Badges or notifications on any of the components of the angular material for example Button, icon text, etc. In this article, we will see the example for each one in detail but before that let’s have a look at the what are the different configurations we need to make in order to configure this in our existing application to use this properly without any error, steps mention below as follows:
1) MatBadgeModule: This module needs to be import inside the root module or any of the child module in which we want to create this notification functionality for the user. For reference please see the below code, from where this module or package can be found and place inside your root module file ;
e.g. :
import {MatBadgeModule} from '@angular/material/badge';2) matBadge: This is the sector which is used to show and create our notification functionality on the UI, and helps us to show the current number of the notification available for the particular user or in general. It has so many different properties which is mentioned below;
a) color: It is used to set the color of the Badges for notification.
b) hidden: It is used to check whether the Badges or notification component hide or not.
c) content: it is used to show the content.
d) disabled: If the Badges is disabled.
e) position: Used to set the position of the Badges or notification.
f) size: It is used to set the size for the Badges.
Now we will have closer look at the steps needed in order to create the angular application from scratch for the beginners with how to add the material library inside it, to use its different module see below;
1) Install angular CLI to make our work easy follow the below command to install in your system globally,
e.g. :
npm install -g @angular/cli2) Now we are all ready to create the new angular project, we just have to execute the below command, and the project will be creating on the particular path mentioned;
e.g. :
ng new your project name>> ng new my-first-projectas per your choice ‘my-first-project’
3) To install the dependency inside our project, not needed it is an optional step you can skip;
e.g. :
npm install4) after this we can now start our application which can be used to do via the below command;
e.g. :
ng serve5) In order to see the changes on the UI we have to have the URL for the same, for now, it is localhost and port is 4200;
e.g. :
http://localhps:4200
6) Now the last step is to install the material library just by executing the below command, and now you be able to see the all modules present;
e.g. :
ng add @angular/materialExample
1) index.html code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<my-notification>loading..</my-notification>2) demo-notification.component.ts code:
import { Component } from '@angular/core';
@Component({
selector: 'my-notification',
templateUrl: './demo-notification.component.html',
styleUrls: [ './demo-notification.component.css' ]
})
export class DemoNotification {
notificationNumberCount: number;
constructor() {
this.notificationNumberCount = 5;
}
increment() {
this.notificationNumberCount++;
}
clear() {
this.notificationNumberCount = 0;
}
}3) demo-notification.component.html code:
<h5><u><i>Notification demo using Angular Material !!</i></u></h5>
<mat-toolbar color="primary">
<span>Menu</span>
<span class="spacer"></span>
<button mat-icon-button >
<mat-icon class="icon">notifications</mat-icon>
<span class="badge" *ngIf="notificationNumberCount > 0">{{notificationNumberCount}}</span>
</button>
<button mat-icon-button >
<mat-icon class="icon">add_shopping_cart</mat-icon>
<span class="badge" *ngIf="notificationNumberCount > 0">{{notificationNumberCount}}</span>
</button>
<button mat-icon-button >
<mat-icon class="icon">circle_notifications</mat-icon>
<span class="badge" *ngIf="notificationNumberCount > 0">{{notificationNumberCount}}</span>
</button>
</mat-toolbar>
<br/><br/> <br/>
<button mat-raised-button (click)="increment()">
<mat-icon class="icon">plus_one</mat-icon>
</button>
<button mat-raised-button (click)="clear()">
<mat-icon class="icon">autorenew</mat-icon>
</button>4) module.ts code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {
MatToolbarModule,
MatButtonModule,
MatIconModule
} from '@angular/material';
import { DemoNotification } from './demo-notification.component';
@NgModule({
imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatToolbarModule, MatButtonModule, MatIconModule ],
declarations: [ DemoNotification ],
bootstrap: [ DemoNotification ]
})
export class DemoModule { }Output:
Default:
After click +1 multiple times:
After click undo button next to it:
Conclusion
As we have seen in this article that notification in a material can easily be created using the Badges module provided by the material library, which is not a difficult process to follow and also, can be easily implemented using the above-mentioned step we can also use its different property as per the need of the application and requirement.
Recommended Articles
This is a guide to Angular Material Notification. Here we discuss the definition, syntax, How notification works in Angular material? examples with code implementation. You may also have a look at the following articles to learn more –
