Alert/Notification Example Using Angular 8/9 and ng2-toastr

This is another angular 8/9 tutorial. I will demonstrate step by step in this angular tutorial about integrating notification or Alert module into angular8/9. You can use this notification module with both angular version 8 and angular 9.

For animation with ng toastr, You need to include the animation Module into angular 8/9 application.

I will use ng2-toastr module. You can install using npm command like below,
npm install ng2-toastr --save

This will download and stored libs into node_modules folder. You can use include ng2 toastr library in head section of index.html file or include into .angular-cli.json file. The .ng2-toastr is the extended version of angular-toastr plugin for angular 8 and angular 9 applications.

After npm installed, We will include the js and css files into .angular-cli.json file.

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

We will inject animation module and toastr module into app/app.module.ts file. We will add the below code into this file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ToastModule } from 'ng2-toastr/ng2-toastr';

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

We will add a method to show notification messages and button html template into app/app.component.ts file. We will add the below code into this file.

import { Component , ViewContainerRef} from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

@Component({
  selector: 'toastr-component',
  template: '<button class="btn btn-default" (click)="showSuccess()">Show Success</button> <button class="btn btn-danger" (click)="showError()">Show Error</button> <button class="btn btn-warning" (click)="showWarning()">Show Warning</button>'
})
export class AppComponent {
  title = 'app';
  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});
      }
}

I have used ViewContainerRef module to dynamically add elements into the dom. The ViewContainerRef used to change DOM dynamically. The 'toastr-component' is selector will lie into index.html to display the button. Finally, we will change index.html file to add a selector.

Added button to show success, error and warning message.You can add more action into HTML template to show info and custom notification.