Share with
Angular 8 Show Alert Or Toastr Notification Popup
In this article, Using ngx-toastr module how you show an alert notification popup.
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 } )
- positionClass is used to arrange the location of notification popup.
- 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
- timeOut is used for set the time to auto hide notification popup.
- preventDuplicates is used to prevent the duplication notification popup.
- 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.
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?