Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 17, 2023

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

Recent Posts

  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme