Welcome folks today in this blog post we will be showing toast
notifications inside angular app using the ngx-toastr
library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleapp
After that we need to install the below libraries using the below command as shown below
npm i ngx-toastr
After installing this library you will seeing the below directory structure of the angular app as shown below
You need to go to angular-cli.json
file and here you need to add the style
url of the ngx-toastr
library as shown below
1 |
"styles": ["styles.css","node_modules/ngx-toastr/toastr.css"] |
Here we are just adding the css
required for showing the toast
animation on the screen. After that we need to go to app.component.html
file and copy paste the below code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<h1>Angular 14 Toastr Notifications Example</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> |
As you can see we have the four
buttons by which we can show different toast
notifications for showing the success
,error,warning
and info
. And also we have binded various methods for all those buttons by using the (click)
attribute.
And now we need to go to app.module.ts
file for including the libraries
as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 {} |
As you can see we are including the browserAnimations
core angular module which is needed for this application and also the ngx-toastr
library as well.
And now we need to go to app.component.ts
file and write the typescript
code for showing the toast
notification animations on button click as shown below
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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 !!', 'codingshiksha.com' ); } showToasterError() { this.notifyService.showError('Something is wrong', 'codingshiksha.com'); } showToasterInfo() { this.notifyService.showInfo('This is info', 'codingshiksha.com'); } showToasterWarning() { this.notifyService.showWarning('This is warning', 'codingshiksha.com'); } } |
Here we are importing the ngx-toastr
library at the top and also we are importing the service
where we are defined all the methods that we are importing on button click
and inside it we are showing the toast messages.
Now we need to define the toast
service file which is called notification.service.ts
file as shown below
notification.service.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { Injectable } from '@angular/core'; import { ToastrService } from 'ngx-toastr'; @Injectable({ providedIn: 'root', }) export class NotificationService { constructor(private toastr: ToastrService) {} showSuccess(message: string, title: string) { this.toastr.success(message, title); } showError(message: string, title: string) { this.toastr.error(message, title); } showInfo(message: string, title: string) { this.toastr.info(message, title); } showWarning(message: string , title: string) { this.toastr.warning(message, title); } } |
As you can see we are importing the ngx-toastr
library at the top and then we are using the different notification
methods to show the methods. Now if you execute the angular
app inside the browser you will see the below result