Implement Toastr Notification in Angular – CodeLife

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:

Table Of Contents

Toastr
Installation of Toastr
Implementation
Related Topics

Toastr

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 ngx-toastr@14.1.4

you can visit this LINK for more version option.

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

npm install @angular/animations

Implementation

Add ToastrModule in your app.module file.

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

@NgModule({
  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';

@Component({
  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.