Toastr Notification in Angular 12

Angular 12 toastr notification tutorial; In this example, i am going to show you how to install toaster/toastr notification library and create toaster/toaster notification in angular 12 apps.

Toastr is a JavaScript library which is used to create a notification success, error, warning and info alert messages. popup.

Angular 12 Toastr Notification Example Tutorial

  • Step 1 – Create New Angular App
  • Step 2 – Install Toastr Notification Library
  • Step 3 – Import Modules on App.Module.ts File
  • Step 4 – Add Code on View File
  • Step 5 – Add Code On app.Component ts File
  • Step 6 – Create Service For Notification
  • Step 7 – Start the Angular App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Toastr Notification Library

Execute the following command on install NPM package called npm install ngx-toastr –save for implement toaster notification in angular:

npm install ngx-toastr --save
npm install @angular/animations --save

After that, open angular.json file and update the following code into it:

.....
    "styles": [
      "node_modules/ngx-toastr/toastr.css",
      "src/styles.css"
    ],
.....

Step 3 – Import Modules on App.Module.ts File

Import modules; so go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

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

Step 4 – Add Code on View File

Create buttons in html to display toastr notification; So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular 12 Toastr Notifications Example - Laratutorials.com</h1>
  
<button (click)="showToasterSuccess()">
    Success Toaster
</button>
  
<button (click)="showToasterError()">
    Error Toaster
</button>
  
<button (click)="showToasterInfo()">
    Info Toaster
</button>
  
<button (click)="showToasterWarning()">
    Warning Toaster
</button>

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
  
import { NotificationService } from './notification.service'
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'toaster-not';
  
  constructor(private notifyService : NotificationService) { }
  
  showToasterSuccess(){
      this.notifyService.showSuccess("Data shown successfully !!", "laratutorials.com")
  }
  
  showToasterError(){
      this.notifyService.showError("Something is wrong", "laratutorials.com")
  }
  
  showToasterInfo(){
      this.notifyService.showInfo("This is info", "laratutorials.com")
  }
  
  showToasterWarning(){
      this.notifyService.showWarning("This is warning", "laratutorials.com")
  }
}

Step 6 – Create Service For Notification

Execute the following command on terminal to create services:

ng generate service notification

Then visit the src/app directory and open notification.service.ts. Then add the following code into notification.service.ts file:

import { Injectable } from '@angular/core';
  
import { ToastrService } from 'ngx-toastr';
  
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  
  constructor(private toastr: ToastrService) { }
  
  showSuccess(message, title){
      this.toastr.success(message, title)
  }
  
  showError(message, title){
      this.toastr.error(message, title)
  }
  
  showInfo(message, title){
      this.toastr.info(message, title)
  }
  
  showWarning(message, title){
      this.toastr.warning(message, title)
  }
  
}

Step 7 – Start the Angular App

Execute the following command on terminal to start angular app:

ng serve

Recommended Angular Tutorials

Leave a Comment