In this article, We learn how to implement ngx-toastr in Angular. I will show how to do it, and just follow the steps clearly. 

For more updates please do Subscribe via Email:


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

Installation of Toastr

To run the installation, run this code to your terminal. this will pick up the latest version of Toastr .

npm i ngx-toastr

or you can run and install specific version.

 //npm i ngx-toastr@version
npm i [email protected]

you can visit this LINK for more version option.

@angular/animations package is a required dependency for the default toast

npm install @angular/animations 


Add ToastrModule in your app.module file.

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

  imports: [   
    ToastrModule.forRoot() // ToastrModule added
    BrowserAnimationsModule // required animations module

Import this into your type-script file.

import { ToastrService } from 'ngx-toastr';

this is all the code of type-script file. ToastrService is imported and initialize private in constructor the toastr. after all I try to show the Toastr notification during load the page.

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

  selector: 'app-toastr-page',
  templateUrl: './toastr-page.component.html',
  styleUrls: ['./toastr-page.component.css']
export class ToastrPageComponent implements OnInit {

  constructor(private toastr: ToastrService) { }

  ngOnInit(): void {
    this.toastr.success('Hello world!', 'Toastr fun!');


Simple Toastr working notification and this is appeared in the right part of your screen.

GitHub Link :

Related Topics

Leave a Reply

Your email address will not be published. Required fields are marked *