Implement Toastr Notification In Angular 7

In this article, we will learn about the Toastr library and how to implement Toastr in Angular 7 for creating notifications.

Toastr is a JavaScript library which is used to create a notification popup.

Step 1

Create an Angular project. To create a new project, open command prompt and add the following command to create the Toastr project.
  1. ng new Toastr   

Step 2

Open this project in Visual Studio Code.

Now, go to View >Terminal and install Toastr into this project by using the following npm command.

  1. npm install ngx-toastr --save  

Now, add @angular/animation to the project. 

  1. npm install @angular/animations --save   

Step 3

Open app.module.ts and add animation and Toastr module in it, using the following line.
  1. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
  2. import { ToastrModule } from 'ngx-toastr';  

Now, import the below-mentioned modules. Here is the complete App.module.ts file.

  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
  6. import { ToastrModule } from 'ngx-toastr';  
  7. import { NotificationComponent } from './notification/notification.component';  
  8. @NgModule({  
  9.   declarations: [  
  10.     AppComponent,  
  11.     NotificationComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     AppRoutingModule, BrowserAnimationsModule,  
  16.     ToastrModule.forRoot()  
  17.   ],  
  18.   providers: [],  
  19.   bootstrap: [AppComponent]  
  20. })  
  21. export class AppModule { }  

Step 4

Open Style.css file and import toastr.css.
  1. @import '~ngx-toastr/toastr.css';  

Step 5

Let's create a component. To create a component, open terminal and add the following command.
  1. ng g c Notification  

Step 6

Open the notification.component.ts file and import the ToastrService.
  1. import { ToastrService } from 'ngx-toastr';      
Add the following lines to the notification.component.ts file.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { ToastrService } from 'ngx-toastr';    
  3. @Component({  
  4.   selector: 'app-notification',  
  5.   templateUrl: './notification.component.html',  
  6.   styleUrls: ['./notification.component.css']  
  7. })  
  8. export class NotificationComponent implements OnInit {  
  9.   
  10.   constructor(private toastr: ToastrService) { }  
  11.   
  12.   ngOnInit() {  
  13.   }  
  14.   successmsg(){  
  15.     this.toastr.success("Toastr Success message",'Success')  
  16. }  
  17.  errorsmsg(){  
  18.     this.toastr.error("Toastr Error Notification",'Error')  
  19.   
  20. }  
  21. infotoastr()  
  22. {  
  23. this.toastr.info("Important News", 'Information');  
  24. }  
  25. toastrwaring()  
  26. {  
  27.   this.toastr.warning("Battery about to Die", 'Warning');  
  28. }  
  29. }  
In this file, we will create some function in which we use the Toastr success, info, warning, and error classes to display a message popup.
 
Implement Toastr notification in Angular 7 
 
Step 7
 
Open the notification.component.html file and add 4 buttons and call the functions.
  1. <div style="padding: top 20px;">  
  2.   <input type="button" value=" Success Message" class="button" (click)="successmsg()">    
  3.   <input type="button" value=" Error Message" class="button" (click)="errorsmsg()">    
  4.   <input type="button" value=" Success Message" class="button" (click)="infotoastr()">    
  5.   <input type="button" value=" Info Message" class="button" (click)="toastrwaring()">    
  6. </div>  
Add some styles to the buttons.
  1. <style>  
  2. .button {  
  3.   padding: 5px 20px;  
  4.   margin: 5px;  
  5.   text-align: center;  
  6.   text-decoration: none;  
  7.   display: inline-block;  
  8.   font-size: 14px;  
  9. }  
  10. </style>  
Run the project and click on the buttons. The notification popup does open and gets disabled after a few seconds.
 
Implement Toastr notification in Angular 7 
 
Step 8
 
We can change the notification popup display location. The default display is at the top-right. We can arrange it at any of the locations on a page.

  • top-center
  • top-left
  • bottom-right
  • bottom-center
  • bottom-left
To change a location, open the app.module.ts file and in the import section, make changes in the toastrmodule.forRoot function.
 
Implement Toastr notification in Angular 7
 
We can also add a button to close the notification pop up. Let's add the following lines in the app.module.ts file and run the project.
  1. ToastrModule.forRoot(  
  2.       {  
  3.         positionClass:'top-left',  
  4.         closeButton: true,  
  5.           
  6.       }  
  7.     )  
Implement Toastr notification in Angular 7
 
We have successfully changed the location of the notification message pop up. In the same way, we can change the notification popup location on a page. 

Summary 

In this article, we learned about Toastr and how we use Toastr notifications in Angular. Toastr provides some unique notification popups which we can use to display a message or any other notification within an application.