How to display notifications in Angular 2

Question

In AngularJS (version 1.x) , we had ng-notify for displaying notifications,we would like to know how to implement the same in Angular 2.

Any idea how to do that?

Answer 1

If we are creating complete FE of some app we are using Angular2 material which has implemented snack bar.

https://github.com/angular/material2

https://material.angular.io/components

Or you can easily integrate toaster that will show nice material toasts https://github.com/PointInside/ng2-toastr

I can strongly recommend both and both were tested in production (though material library is currently still beta)

Answer 2

I have used the PrimeNG package which include a lot of UI components, there messages component to display notifications: PrimeNG - Messages Component

Answer 3

Another option is ng2-toasty

Below are steps:

1)Install using - npm install ng2-toasty --save

2)Update systemjs.config.js

System.config({
    map: {
        'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js'
    }
});

3) Import ToastyModule

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {ToastyModule} from 'ng2-toasty';

@NgModule({
    imports: [
        BrowserModule,
        ToastyModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

4) Use the ToastyService for your application

import {Component} from '@angular/core';
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';

@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="addToast()">Add Toast</button>
        <ng2-toasty></ng2-toasty>
    `
})
export class AppComponent {

    constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) { 
        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. 
        // Possible values: default, bootstrap, material
        this.toastyConfig.theme = 'material';
    }

    addToast() {
        // Just add default Toast with title only
        this.toastyService.default('Hi there');
        // Or create the instance of ToastOptions
        var toastOptions:ToastOptions = {
            title: "My title",
            msg: "The message",
            showClose: true,
            timeout: 5000,
            theme: 'default',
            onAdd: (toast:ToastData) => {
                console.log('Toast ' + toast.id + ' has been added!');
            },
            onRemove: function(toast:ToastData) {
                console.log('Toast ' + toast.id + ' has been removed!');
            }
        };
        // Add see all possible types in one shot
        this.toastyService.info(toastOptions);
        this.toastyService.success(toastOptions);
        this.toastyService.wait(toastOptions);
        this.toastyService.error(toastOptions);
        this.toastyService.warning(toastOptions);
    }
}

Simple demo available here - http://akserg.github.io/ng2-webpack-demo/#/toasty

Sample code available here - https://github.com/akserg/ng2-systemjs-demo