Use Alert / Toast Notifications In Angular 4 [Angular 2/4/5 Toaster]

This article will guide you through how to use Alert / Toast notifications in Angular 4 app.

Nowadays, every modern web application requires an awesome user experience and notifications are one of the important aspects of making the users feel well based on the overall UI.

ng2-toastr allows us to integrate toast notification in angular 4 apps. It’s easy to install and use in your apps.

So, let’s get started with Angular 4 notifications.

Install ng2-toastr In Angular 4

I am assuming that you already have the app ready if not, you can visit to create and set up your first angular 4 hello world app.

Now, let’s install ng2-toastr by using following command.

npm install ng2-toastr --save

Next, don’t forget to add toastr CSS file in your app.

angular-cli.json

"styles": [
        //Other styles...
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
    ],

Usage of Alert / Toast Notifications In Angular 4

Now, we’re ready to use toast notifications in Angular 4 by importing the necessary dependencies in module and component.

1. Import Toast module in main module

First of all, let’s import ToastModule in your main module.

/src/app/app.module.ts

//Import core module
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
//Import app component
import {AppComponent} from './app.component';
//Import toast module
import {ToastModule} from 'ng2-toastr/ng2-toastr';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    
@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, ToastModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {

}

Takeaways,

• Firstly, import section has necessary module imported into the main module of app.
• Secondly, add ToastModule.forRoot() in imports section of NgModule to allows the app to use ToastModule.

2. Import and Use ToastsManager

Next, let’s inject ToastsManager in a component where you want to use toast notifications.

Here, we’re going to use toast notifications in app component.

/src/app/app.component.ts

//Import core module
import { Component, ViewContainerRef } from '@angular/core';
//Import ToastsManager
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
    
@Component({
  selector: 'awesome-component',
  template: 
  `<button class="btn btn-default" (click)="showSuccess()">Toastr Tester</button>
   <button class="btn btn-default" (click)="showError()">Toastr Tester</button>`
})
export class AppComponent {

  constructor(public toastr: ToastsManager, vcr: ViewContainerRef) {
     this.toastr.setRootViewContainerRef(vcr);
  }
    
  showSuccess() {
    this.toastr.success('You are awesome!', 'Success!');
  }

  showError() {
    this.toastr.error('This is not good!', 'Oops!');
  }

  showWarning() {
    this.toastr.warning('You are being warned.', 'Alert!');
  }

  showInfo() {
    this.toastr.info('Just some information for you.');
  }
  
  showCustom() {
    this.toastr.custom('<span style="color: red">Message in red.</span>', null, {enableHTML: true});
  }
}

Takeaways,

• First of all, to use ToastsManager we had to import it.
• Second, don’t forget to inject toastr in constructor and set as setRootViewContainerRef to start using it’s methods what we generally do with a traditional angular 4 services.
• Finally, start using toastr methods to call toast notifications in Angular 4 apps. Like this.toastr.success will allow you to call success method, this.toastr.error will use for error method, and many more methods available as per your need you can use them.

Note: To apply bootstrap styles, you can also start using bootstrap components along with the angular 4 toast notifications.

Finally, by clicking on a button or calling a method normally will call the respective toast notification in your browser window.

In addition, you can apply customization in Angular 4 notifications using ToastOptions Configurations.

Moreover, I hope, you loved this article and it helped you to integrate toast notifications in Angular 4 apps.Don’t forget to share!