Angular 14 Toast Notification Alert Messages Example Using ngx-toastr Library in TypeScript

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

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

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

<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>

<h1>Angular 14 Toastr Notifications Example</h1>

Success Toaster

</button>

Error Toaster

</button>

Info Toaster

</button>

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

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 {}

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

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');
  }
}

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

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);
  }
}

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