Guide to use Toastr in Angular-2

Setting Toastr Globally in Angular 2

In this article we are going to see how to set Toastr globally in Angular 2 application, setting Toastr globally will minimize the length of code which results in better efficiency and is easy to maintain.

A Toast  is a graphical user interface ( GUI ) display area, usually a small window, that suddenly appears (“pops up”) in the foreground of the visual interface, it is a non-modal, unobtrusive window element used to display brief information, auto expiring window of information/message at the bottom or top of the screen. Basically used for notification purpose for User which make them easy to understand what changes are made.

Toastr is used in both Web & Mobile Applications, Here we will see how to implement and set Toastr globally in our Angular 2 web Application. There are no of packages available for Toaster, we are going to use ng2-toastr  which is the package of npm.

Implementation can be done by following a few simple steps as below:

1. Open cmd and set the path to your Angular 2 project and type following command:
   

   npm install ng2-toastr –-save

2. Open angular-cli.json file, this file contains all the dependencies and make following changes in style & scripts:
   

   "styles": [ "../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/primeng/resources/primeng.min.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/animate.css/animate.min.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css", "assets/styles/style.css" ], "scripts": [ "../node_modules/systemjs/dist/system.js", "../node_modules/jquery/dist/jquery.min.js", "../node_modules/ng2-toastr/bundles/ng2-toastr.min.js", ],

   Else, You can also Include js and css files in html header in Index.html file

   <link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet"/><script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script>

3. Applications in Angular 2 follow modular structure. Angular 2 apps will contain many modules, each dedicated to the single purpose. Typically module is a cohesive group of code which is integrated with the other modules to run your Angular 2 apps, all these modules are added in one common file i.e  app.modules.ts , so we need to import ToastModule in it.
   

   import{ ToastModule} from 'ng2-toastr/ng2-toastr'; imports:[ ToastModule ]

4. Now in Angular 2 application we have one Global controller which runs throughout the execution of our application i.e app.components.ts, the modules which will be used commonly  throughout  application is to be declared here, as the toastr will be active in all the components of our application this the best place to define our toastr just add few code given below:
   

   import { Component, OnInit, ViewContainerRef } from '@angular/core'; import { ToastsManager } from 'ng2-toastr/ng2-toastr'; export class AppComponent { constructor(public toastr: ToastsManager, vRef: ViewContainerRef) { this.toastr.setRootViewContainerRef(vRef); }

5. Toastr is set Now, you can use toastr in any component /service of your application, just you need is to add a message and import ToastsManager  like code given below:
   

   import { ToastsManager } from 'ng2-toastr/ng2-toastr'; @Injectable() export class CustomerService { constructor(private http: Http, private toastr: ToastsManager) { } addCustomer(body) { return this.http.post(AppConfig.addcustomerURL, body) .do(data => { this.toastr.success('Successfully added customer.', 'Success!'); }); } }

   There are also different types of toastr messages like:

   this.toastr.success('You are awesome!', 'Success!'); this.toastr.error('This is not good!', 'Oops!'); this.toastr.warning('You are being warned.', 'Alert!'); this.toastr.info('Just some information for you.');

   Out-put of above Code will look like:

Benefits of setting Toastr Globally

• Its would be easy to maintain.
• By setting toastr globally with also reduce length of code, which results in better efficiency.