Angular2: Custom toaster / notification service using Angular2 Material Snackbar Component


Since toasters/notifications are essential component for any connected web application, we have couple of toasters component available in market for angular2, I am using Angular Material Snackbar component.


Since toasters/notifications are used throughout the application, so its better to define as unified service and then consume it throughout application by injecting service in various controllers.


  • Install Angular Material components
npm install --save @angular/material
  • Import the Angular Material NgModule in src/app/app.module.ts
import { MaterialModule } from '@angular/material';
// other imports 
  imports: [MaterialModule],
export class PizzaPartyAppModule { }
  • Some of the components like md-slide-toggle, md-slider, mdTooltip rely on HammerJS for gestures
npm install --save hammerjs

After installing, import HammerJS on your app’s module. src/app/app.module.ts

import 'hammerjs';
  • If your project is using SystemJS for module loading, you will need to add @angular/material to the SystemJS configuration:
  // existing configuration options
  map: {
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js'


Step 1 : Create angular material toaster service IN toaster.service.ts:

import { Injectable } from '@angular/core';
import { MdSnackBar } from '@angular/material';

export class ToasterService {

    constructor(private snackBar: MdSnackBar) {

    showToaster(msg: string) {, null, {
            duration: 3000,

A snack-bar can contain either a string message or a given component.

// Simple message.
let snackBarRef ='Message archived');

// Simple message with an action.
let snackBarRef ='Message archived', 'Undo');

// Load the given component into the snack-bar.
let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent);

Step 2: Register toaster service to main module IN app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MaterialModule } from '@angular/material';
import 'node_modules/hammerjs/hammer.js';

import { AppComponent } from './app.component';
import { CustomComponent } from './custom.component';
import { ToasterService } from './shared/service/toaster.service';

    imports: [
        //angular builtin module

        //ui module
    declarations: [
    providers: [
    bootstrap: [
    schemas: [

export class AppModule {

Step 3: Inject toaster service in controller, let say custom.component.ts:

import { Component, OnInit } from '@angular/core';
import { ToasterService } from '../toaster.service';

    selector: 'search-movie',
    templateUrl: '../custom.component.html'

export class CustomComponent implements OnInit {

        private toasterService: ToasterService) {

    ngOnInit() {
        this.toasterService.showToaster('Hello World');





2 thoughts on “Angular2: Custom toaster / notification service using Angular2 Material Snackbar Component

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s