How to Create Angular Toastr Notifications

How to Create Angular Toastr Notifications

<strong>Create an Angular service called notification , which you'll use in your application for showing the toastr message. In src/app create a folder called utility . Navigate to the utility folder and create an Angular service.</strong>

Create an Angular service called notification , which you'll use in your application for showing the toastr message. In src/app create a folder called utility . Navigate to the utility folder and create an Angular service.

Note: This tutorial uses Angular CLI 6.2.4, @angular/animations 6.1.9, and ngx-toastr 9.1.0.

Showing notifications and alerts is a common use case that we encounter while developing any web application. In this tutorial, we’ll do an overview of how you can show toastr notifications in an Angular web application.

Creating an Angular Application

Let’s begin by creating an Angular web application from scratch. 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.

ng new angular-alert-app  

The above CLI command creates a boilerplate Angular web app. Navigate to the project directory and start the web app.

cd angular-alert-app
npm start

You will have the Angular web app running at http://localhost:4200/.

Creating an Angular Component

Let’s start from the very scratch. Remove the existing default component files from src/app folder except for app.module.ts. Create a root component using the Angular CLI tool.

ng generate component root  

Remove the AppComponent reference from the app.module.ts and set the RootComponent as the bootstrap component.

Inside the app/root/root.component.html file add the following HTML code.

Show Toaster </button>

Add the following CSS style to the app/root/root.component.css file.

padding: 10px; margin: 0px; background-color: red; border-radius: 100px; cursor: pointer; border: 0px; }

Save the above changes and restart the Angular application. You will be able to see the RootComponent with a button rendered in the web browser.

Adding ngx-toastr to the Angular App

Install ngx-toastr using Node Package Manager (npm). ngx-toastr also requires the @angular/animationpackage as a dependency.

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

Once you have installed the above packages, open the <project-directory>/angular.json file and include the toastr CSS.

"styles": [

Include the BrowserAnimationsModule and ToastrModule in the app.module.ts file and import both the modules.

Here is how the app.module.ts file looks:

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

import { RootComponent } from './root/root.component';

@NgModule({ declarations: [ RootComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot() ], providers: [], bootstrap: [RootComponent] }) export class AppModule { }

In order to use the ngx-toastr module, you need to include the ToastrService in the RootComponent.

import { ToastrService } from 'ngx-toastr';  

Instantiate the ToastrService in the RootComponent's constructor method. Define a method to show the Toast message. Inside the method, initiate the success method of the ToastrService instance.

Here is how the method root.component.ts file should look:

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

@Component({ selector: 'app-root', templateUrl: './root.component.html', styleUrls: ['./root.component.css'] }) export class RootComponent implements OnInit {

constructor(private toastr: ToastrService) { }

ngOnInit() {


showToaster(){ this.toastr.success("Hello, I'm the toastr message.") }


Then, add the click handler to the button inside the root.component.html file.

<button (click)="showToaster()">
Show Toaster </button>

Save the above changes and restart the server. Click on the Show Toaster button when running the application on http://localhost:4200/. You will be able to view the toast message.

Adding a Custom Wrapper

Whenever you use an external module in your web application, it is always recommended to write a wrapper for it. Writing a wrapper makes sure that, in case at some point in future you need to replace the third party module, it doesn’t break your application or need a lot of rewrite.

Let’s have a look at how you can add a wrapper for ngx-toastr in your Angular application.

Create an Angular service called notification, which you’ll use in your application for showing the toastr message. In src/app create a folder called utility. Navigate to the utility folder and create an Angular service.

ng generate service notification  

Import the ngx-toastr service inside the NotificationService. Create a method called showSuccess to show success notification toasts. The notification.service.ts file should look similar to this:

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) } }

Import the NotificationService wrapper inside the RootComponent and call the showSuccess method to show toast messages.

Here is how the root.component.ts file looks:

import { Component, OnInit } from '@angular/core';
import { NotificationService } from '../utility/notification.service'

@Component({ selector: 'app-root', templateUrl: './root.component.html', styleUrls: ['./root.component.css'] }) export class RootComponent implements OnInit {

constructor(private notifyService : NotificationService) { }

ngOnInit() {


showToaster(){ this.notifyService.showSuccess("Data shown successfully !!", "Notification") }


In case if you need to replace the ngx-toastr with any other module, you only need to modify the NotificationService. No other part of the application needs any change.

Customizing The Toast Notification

ngx-toastr provides a number of options to customize the toast notification. You can control how you want the toast notification to render. Find more information on the official docs.

Adding HTML Content Inside Toast

ngx-toastr provides an option to add HTML code inside the toast message. To enable it to use HTML content inside the toast notification, you need to use the enableHtml option.

Add a new method inside the notification.service.ts file to render HTML inside the toast notification, as shown:

showHTMLMessage(message, title){
this.toastr.success(message, title, { enableHtml : true }) }

Call the above message on click of the button and you will have the HTML content displayed inside the toaster notification.

this.notifyService.showHTMLMessage("<h2>Data shown successfully !!</h2>", "Notification") }

Control Notification Display Time

ngx-toastr also provides an option to control the time for which the notification is displayed. You can increase or decrease the time by using the timeOut option. The time unit here is milliseconds.

showSuccessWithTimeout(message, title, timespan){
this.toastr.success(message, title ,{ timeOut : timespan }) }

Wrapping It Up

In this tutorial, you learned how to use ngx-toastr to show toast notifications in an Angular web application. For detailed information on ngx-toastr, we recommend reading the official documentation.

The source code from this tutorial is available on GitHub.

Have you used any other modules to show notifications in an Angular web application? Do let us know your thoughts by tweeting to @Jscrambler.

**Also, if you’re building applications with sensitive logic, be sure to protect them against code theft and reverse-engineering by following our guide.

Originally published by Jay Raj at

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ The Web Developer Bootcamp

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.