How to Create Toaster Notifications in Angular10?

In this blog, we are going to see that how can we create a Toaster Notification in Angular10. So we can use these notifications in any component to notify the desired notification alerts to the browser.how-to-create-toaster-notifications-in-angular10

how-to-create-toaster-notifications-in-angular10

how-to-create-toaster-notifications-in-angular10

We can create Toaster notifications in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, and angular 13.

Step 1: Create New App

You can easily create your angular 9 apps using bellow command:

ng new my-new-app

Step 2: Install Toastr

In this step, we will install ngx-toastr and @angular/animations npm packages. so let’s run both commands as like below:

npm install ngx-toastr –save

npm install @angular/animations –save

Now, we need to include toaster CSS like “node_modules/ngx-toastr/toastr.css”, so let’s add it on the angular.json file.

“styles”: [
“node_modules/ngx-toastr/toastr.css”,
“src/styles.css”
],

Step 3: Import Module

In this step, we need to import ToastrModule and BrowserAnimationsModule to the app.module.ts file.

expoundsofttechsolution

Step 4: Create Service for Notification

Here, we will create a separate notification for Toastr. so you can use showSuccess(), showError(), showInfo() and showWarning() in any component.

run below command:

ng generate service notification

src/app/notification.service.ts

import { Injectable } from ‘@angular/core’;
import { ToastrService } from ‘ngx-toastr’;

@Injectable({
providedIn: ‘root’
})
export class NotificationService {
constructor(private toastr: ToastrService) { }
showSuccess(message, title){
this.toastr.success(message, title)
}

showError(message, title){
this.toastr.error(message, title)
}

showInfo(message, title){
this.toastr.info(message, title)
}

showWarning(message, title){
this.toastr.warning(message, title)
}

}

Step 5: Updated View File

Now here, we will update our HTML file. we will create simple four buttons for alert messages.

src/app/app.component.html

Step 6: Use Component ts File

import { Component, OnInit } from ‘@angular/core’;

import { NotificationService } from ‘../../services/notification.service’

@Component({
selector: ‘app-notification’,
templateUrl: ‘./notification.component.html’,
styleUrls: [‘./notification.component.css’]
})
export class NotificationComponent implements OnInit {
title = ‘toaster-not’;

constructor(private notifyService : NotificationService) { }

SuccessMessage(){
this.notifyService.showSuccess(“User Added successfully !!”, “Success”);
}

ErrorMessage(){
this.notifyService.showError(“Something is wrong”, “Failed”);
}

InfoMessage(){
this.notifyService.showInfo(“This is info”, “Information”);
}

WarningMessage(){
this.notifyService.showWarning(“This is warning”, “Warning”);
}

ngOnInit(): void {
}

}

Now, the app is ready for the run using the below command:

ng servehow-to-create-toaster-notifications-in-angular10

And the result view will be shown like this:

I hope you will follow the above steps and use this in your application.

So, thanks for following this blog, and if you need any help please leave your queries in the comment box we will be happy to help you.