Angular Toaster Notifications tutorial

September 15, 2019
by Rahil Shaikh
  • Angular Toast Notification

In this Angular tutorial, we will learn how to add Toaster notifications to our Angular Application.

The goal of this Angular tutorial is to make integrating notifications to our application as easy as possible. We will use a third-party npm package angular-notifier to achieve this.

So let’s just get on with the implementation.

Setup

Create a new Angular application using the Angular-CLI.

ng new toaster

There are five types of Toaster notifications in general…

  • Error: For displaying error notification.
  • Success: For notifying user that his operation was successfull.
  • Warning: Displaying warning messages.
  • Info: Display general info messages.
  • Default: Similar to info, generally not used.

So I’ll go ahead and add five buttons for each of them.

ng serve

Let’s try and run it…

Now we have a simple page with 5 buttons.

Integrating Toaster Notifications in Angular

We try to show notifications of different types on click of these buttons.

Install angular-notifier

npm i angular-notifier --save

Next, let’s add the module to our app module.

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NotifierModule } from 'angular-notifier';


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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NotifierModule.withConfig({
      position: {
        horizontal: {
          /**
           * Defines the horizontal position on the screen
           * @type {'left' | 'middle' | 'right'}
           */

          position: 'right'
        }
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have also passed some configuration settings to place the notification towards the right bottom of the screen. Ideally, this is the place where you should show notifications for better user experience. You can check out the entire list of configuration options here.

We also need to place the notifier component () somewhere in our HTML, ideally, this should be somewhere higher in the component hierarchy. For example in app.component.html. We will place this at the bottom of our app.component.html.

app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Toaster Notifications: </h2>
<ul>
  <li>
    <button>Success</button>
  </li>
  <li>
    <button>Error</button>
  </li>
  <li>
    <button>Warning</button>
  </li>
  <li>
    <button>Default</button>
  </li>
  <li>
    <button>Info</button>
  </li>
</ul>
<notifier-container></notifier-container>

Next, we need to add the stylesheet to angular.json file.

angular.json
...
..,
     "styles": [              
              "node_modules/angular-notifier/styles.css",
              "src/styles.scss"
            ],
..,
...

So now we have everything setup. Let us see how we can use it.

Angular Notifier provides us with NotifierService service, which can be used to call toaster notifications.

app.component.ts
import { Component } from '@angular/core';
import { NotifierService } from 'angular-notifier'; // import NotifierService


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private readonly notifier: NotifierService;
  title = 'toaster';

  constructor( notifierService: NotifierService ) {
    this.notifier = notifierService;
  }

  notify(type, message) {
    this.notifier.notify( type, message ); // call notification
  }
}

So here, we have imported the NotifierService and then we have also defined a method called notify on our component. This method will in turn call the notify method on the NotifierService.

We will also have to change the html to call this method on click event.

app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Toaster Notifications: </h2>
<ul>
  <li>
    <button (click)="notify('success', 'Bravo! Well done.')">Success</button>
  </li>
  <li>
    <button (click)="notify('error', 'Err! That didn not work.')">Error</button>
  </li>
  <li>
    <button (click)="notify('warning', 'Zap! Reaching speed limit.')">Warning</button>
  </li>
  <li>
    <button (click)="notify('default', 'Howdy!')">Default</button>
  </li>
  <li>
    <button (click)="notify('info', 'Welcome to westlife.')">Info</button>
  </li>
</ul>
<notifier-container></notifier-container>

Now on running the app and clicking on the buttons you should be able to see notifications popup on the right bottom of your application.

Angular toaster Notifications

Conclusion

In this Angular tutorial we learnt how to easily add toast notifications in our applications. You can browse the npm package we used here. You can also view and download the code of this tutorial from this github repo.

Keep Learning…

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment