Showing notification using toaster in Angular 2

The last four articles were dedicated to the private chat application where I used angular 2, So when we talk about chatting application one of the most important thing comes to our mind is notification.In this article, we will be Showing notification using toaster in Angular 2.

Notification plays very important role, for example, the online appearance of new user or notification for the incoming message.Here we will use ng2-toastr, you can find out the GitHub repository here.

Also read, Showing notification using toaster in AngularJs

 Download

Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

The Application

In this application, We will use ng2-toastr to show the notifications and I will try to cover all its useful features.

Installing and configuring ng2-toastr module:

First, you need to install this module from NPM, run the below command and save it into your package.json file,

npm install ng2-toastr --save

Above command will download and install the ng2-toastr module and at the same time, save it to package.json as a dependency.

Now installation is complete, let’s import this module in our application so, to do that open file app.module.ts and import the ng2-toastras shown below.
app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        BrowserModule, 
        BrowserAnimationsModule,
        ToastModule.forRoot()
    ],
    providers:[],
    bootstrap: [AppComponent]
})

export class AppModule { }

Getting started with ng2-toastr

Let’s start with basics, first, we will implement the simple notification then we will see some of its cool features.

But before that, we will have to import a ng2-toastr.min.css file which required by ng2-toastr.

// index.html

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

Open the app.component.html file and write down below code.

app.component.html:

// app.component.html

<div class="btn btn-success" (click)="showSuccess()">Success Notification</div>

To make above code work, we will write some typescript, now open app.component.ts file and write below code.

app.component.ts:

/*
Showing notification using toaster angular 2
author Shashank Tiwari
*/

// app.component.ts

import { Component , ViewContainerRef } from '@angular/core';

/* Importing ToastsManager library starts*/import { ToastsManager } from 'ng2-toastr/ng2-toastr';
/* Importing ToastsManager library ends*/
@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

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

private showSuccess(){
    this.toastr.success("Success", 'You are on right track.');
}
}

In the above code, we have importedViewContainerRef from the angular core, this is because ToastManager needs viewContainerRef in order to inject ToastContainer into DOM (from here).Then we have imported ToastsManager from ng2-toastr/ng2-toastr.

Inside the showSuccess() method, we will call success method ofToastsManager class. As the name indicates this method shows the success notifications. Below is the list of methods that you call on ToastsManager class.

• success(): To show the success notification.
• error() : Error notification will be triggered by this method.
• info(): To show the info notification.
• warning(): To show the warnings.
• custom(): To show the custom notification.

You can call the above-listed methods just like in above example.

Overriding global option:

Controlled Notifications:

Now let’s see some of ng2-toastr’s features, read the list of toastOption configuration from here. Let’s first see how to dismiss a toastr on particular logic. Take a look at below code, In the below code we are passing the third parameter as an object {dismiss: 'controlled'}.

this.toastr.success('You are awesome!', 'Success!', {dismiss: 'controlled'})
    .then((toast) => {
        // DO some stuff here
        // and based on the condition dismiss the toast
            this.toastr.dismissToast(toast);
    });

onClick observable on ToastManager instance:

Yes, you can add onclick observable on the ToastManager instance. To do that write doen the below code.

this.toastr.onClickToast()
    .subscribe( toast => {
    /*
    * Do some stuff here
    */        console.log(toast.data);
    });


this.toastr.error('Error logs are here.', 'Error!', {data: {Error: 'Worst error ever'}});

For this article that’s it, however, you will find more examples in the source code of this article.The ng-2-toastr is a very usefull library for showing notification in any application and yes it is open source.