How to use Toastr Notification in Angular 5

Saif Shakil Angular 08 December, 2017 : 03:58 PM

How to use Toastr Notification in Angular 5

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. 




TAGS: Angular 4 Angular 5 Toastr Notification
Views: 2799

Related Posts you may like