Angular 9 Toastr Notifications Example

By Hardik Savani October 20, 2023 Category : Angular

This article will provide example of how to use toaster in angular 9. i would like to show you angular 9 - alert (toastr) notifications. this example will help you toaster alert in angular 9. This article goes in detailed on toaster alert angular 9. Here, Creating a basic example of toast alert angular 9.

We will use ngx-toastr npm package for toastr notification in angular 9 application. we need to install two npm packages ngx-toastr and @angular/animations that provide to use success, error, warning and info alert messages.

I will give you very simple example and step by step so you can easily implement toaster notification in your angular 9 application. you can see bellow preview for alert too.

Step 1: Create New App

You can easily create your angular 9 app 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 command as like bellow:

npm install ngx-toastr --save

npm install @angular/animations --save

Now, we need to include toastr css like "node_modules/ngx-toastr/toastr.css", so let's add it on angular.json file.



"styles": [





Step 3: Import Module

In this step, we need to import ToastrModule and BrowserAnimationsModule to app.module.ts file. so let's import it as like bellow:


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';


declarations: [



imports: [





providers: [],

bootstrap: [AppComponent]


export class AppModule { }

Step 4: Create Service for Notification

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

so let's put bellow code:

run bellow command:

ng generate service notification


import { Injectable } from '@angular/core';

import { ToastrService } from 'ngx-toastr';


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){, title)


showWarning(message, title){

this.toastr.warning(message, title)



Step 5: Updated View File

Now here, we will updated our html file. we will create simple four buttons for alert messages.

so let's put bellow code:


<h1>Angular 9 Toastr Notifications Example -</h1>

<button (click)="showToasterSuccess()">

Success Toaster


<button (click)="showToasterError()">

Error Toaster


<button (click)="showToasterInfo()">

Info Toaster


<button (click)="showToasterWarning()">

Warning Toaster


Step 6: Use Component ts File

Now we need to update our component.ts file here we will use notification service and call alert, let's update as like bellow:


import { Component } from '@angular/core';

import { NotificationService } from './notification.service'


selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']


export class AppComponent {

title = 'toaster-not';

constructor(private notifyService : NotificationService) { }


this.notifyService.showSuccess("Data shown successfully !!", "")



this.notifyService.showError("Something is wrong", "")



this.notifyService.showInfo("This is info", "")



this.notifyService.showWarning("This is warning", "")



Now we are ready to run both:

Run Angular App:

ng serve

I hope it can help you...