How to use Toastr Notification in Angular 5

Sun May 15 2022

Syful Islam Shakil


If you are using toastr notification for so long, then surely you would want to use in angular too. But how you will get it on angular? Let me explain the steps of using toastr notification.

1st step:


npm install ng2-toastr --save

2nd step: 

include required css files on src/index.html file on 


<link href="https://cdn.jsdelivr.net/npm/ng2-toastr@4.1.2/ng2-toastr.css" rel="stylesheet" />

Now go to src/app/app.module.ts and import the module -


import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


imports: [
    BrowserModule,
    ToastModule.forRoot(), BrowserAnimationsModule,
],

Now you are done with adding the module. 

3rd Step:

Now import the toastr module to your component page -


import {ToastsManager} from 'ng2-toastr/ng2-toastr';

add following codes on constructor


constructor( private _vcr: ViewContainerRef) { this.toastr.setRootViewContainerRef(_vcr); }

 

Now simply after execution form submission you will show message on following way -


addEmployee(post) {
    this.employeesService
        .addEmployee(post)
        .subscribe(response => {
                console.log(response);
            }
        );


    this.toastr.success('Employee Information Added!');

    this.rForm.reset();
}

here addEmloyee() function is executing after form submission. 

Here you can use success/info/warning/error all of them. 

 


4835 Views

Shakil's Blog ©2017-©2024 All Rights Reserved