Share and Learn To Write Code!

Introduction

In this article, Using ngx-toastr module how you show an alert notification popup. Toastr is a JavaScript library which is used to create a notification popup.

Prerequisite

1) Node js. Click here to install nodejs.

2) Angular Framework, If you do not know how to install angular in your system please check this article install Angular

3) Bootstrap, click here to install bootstrap.

Example for Toastr Notification Popup

1) To get started, make sure that you have the Angular CLI installed in your system.

npm install -g @angular/cli

Once the Angular CLI has been installed, you can use the ng tool to create an Angular web application.

2) Create Angular App

ng new notification_popup_example

This will create notification_popup_example angular application

3) Open this app project in visual code or any other which is used by you.

4) Install all prerequisites packages for angular app

npm install ngx-toastr @angular/animations --save

In this project we need ngx-toastr package to showing notification popup and @angular/animations is dependency of

5) Go to src > angular.json file to register ngx-toastr css in style, see below code.

// angular.json

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

6) Register ngx-toastr and browser animation module packages to app module. Open src > app > app.module.ts

// src > app > app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
	RootComponent
  ],
  imports: [
	BrowserModule,
	BrowserAnimationsModule, // To support the animation notification toastr popup
	ToastrModule.forRoot() // To use the notification popup this is ngx-toastr module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

7) Example of Toastr Notification Service

Open app component file and call the toastr service like this

src > app > app.component.ts

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Notification Application';

  constructor(private toastr: ToastrService) { }

  successmsg() {
    this.toastr.success("Toastr Success message", 'Success')
  }

  errorsmsg() {
    this.toastr.error("Toastr Error Notification", 'Error')
  }

  infotoastr() {
    this.toastr.info("Important News", 'Information');
  }

  toastrwaring() {
    this.toastr.warning("Battery about to Die", 'Warning');
  }
}

Now add the buttons to call the notification popups into app component html file

// src > app > app.component.html

<div style="padding: top 20px;">  
  <input type="button" value=" Success Message" class="button" (click)="successmsg()">    
  <input type="button" value=" Error Message" class="button" (click)="errorsmsg()">    
  <input type="button" value=" Success Message" class="button" (click)="infotoastr()">    
  <input type="button" value=" Info Message" class="button" (click)="toastrwaring()">    
</div>  

Run your app using ng serve and check the result.

fig:- Results of notification popups

8) Default notification popup is display at top-right side. To change the notification time and location of the popup notification, make changes in the toastrmodule.forRoot function.

 We can arrange it at any of the locations on a page.

• top-center
• top-left
• bottom-right
• bottom-center
• bottom-left

ToastrModule.forRoot(  
      {  
        positionClass:'top-left',  
        closeButton: true,
        timeOut: 10000,
        preventDuplicates: true,
        enableHtml :  true
      }      
)

1. positionClass is used to arrange the location of notification popup.
2. closeButton is boolean attribute if we set true then we can close the toastr using the close the button. Else we can set false to auto hide the notification popup
3. timeOut is used for set the time to auto hide notification popup.
4. preventDuplicates is used to prevent the duplication notification popup.
5. enableHtml is used to add the html tags in toastr notification popup. If you want to use html tags in message set true in enbleHtml. Else set false.

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. 

If you like please like and share to your developer friends.

Related Post :

Open model popup in Angular 6 | 7 | 8 | 9 using @ng-bootstrap NgbModal

How to install angular 8 in windows operating system.

Design student simple database using slick carousel implementation in angular 7 with firebase.

How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

Design custom bootstrap 4 pagination for angular project instead of using 3rd party pagination

How to install @ng-bootstrap to angular cli and uses of @ng-bootstrap

Install Node JS in windows machine and set environment path in settings.