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