Toaster Notification in Angular 16

Toasters are a fantastic way to provide feedback and notifications to users in a user-friendly manner. Feel free to experiment further with customizations and explore more features offered by the ngx-toastr library to create a delightful user experience in angular projects.

In this tutorial, you will learn how to integrate, use and customize toaster notifications in angular 16 projects using ngx-toastr.

How to Install and Use Toaster Notification in Angular 16

Steps to integrate and use toaster notifications in angular project using ngx-toastr; are as follows:

• Step 1 – Create New Angular App
• Step 2 – Install ngx-toastr package
• Step 3 – Import and configure the ToastrModule
• Step 4 – Implement the toaster service
  

• Step 5 – Create a button to trigger the toaster
• Step 6 – Implement the showToaster() method
• Step 7 – Customize the toaster appearance (optional)
• Step 8 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your command prompt or cmd to install & setup angular new project in system by executing the following command on command prompt or cmd:

ng new my-new-app

Step 2 – Install ngx-toastr package

Next, Open a command prompt or cmd and navigate to your Angular project folder. Install ngx-toastr using npm:

npm install ngx-toastr --save

Step 3 – Import and configure the ToastrModule

In the app.module.ts file, import the necessary modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Step 4 – Implement the toaster service

Create a new service to manage toaster messages. In the terminal, run:

ng generate service toaster

Open the generated toaster.service.ts file and add the following code:

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root',
})
export class ToasterService {

  constructor(private toastr: ToastrService) { }

  success(message: string, title?: string) {
    this.toastr.success(message, title);
  }

  error(message: string, title?: string) {
    this.toastr.error(message, title);
  }

  warning(message: string, title?: string) {
    this.toastr.warning(message, title);
  }

  info(message: string, title?: string) {
    this.toastr.info(message, title);
  }

}

Step 5 – Create a button to trigger the toaster

In the app.component.html file, add a button to trigger the toaster:

<button (click)="showToaster()" class="btn btn-primary">Show Toaster</button>

Step 6 – Implement the showToaster() method

In the app.component.ts file, import the ToasterService and create the showToaster() method:

import { Component } from '@angular/core';
import { ToasterService } from './toaster.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private toasterService: ToasterService) { }

  showToaster() {
    this.toasterService.success('This is a success message!', 'Success');
  }
}

Step 7 – Customize the toaster appearance (optional)

You can customize the appearance of the toasters by configuring the ToastrModule in app.module.ts. The ToastrModule.forRoot() method accepts a configuration object. Here’s an example of how to customize the toasters:

@NgModule({
  // ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 3000, // Time to close the toaster (in milliseconds)
      positionClass: 'toast-top-right', // Toast position
      closeButton: true, // Show close button
      progressBar: true, // Show progress bar
    }),
  ],
  // ...
})
export class AppModule { }

Step 8 – Start the Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Conclusion

Congratulations! You have successfully implemented and customized toasters in your Angular application using the ngx-toastr library.

Recommended Angular Tutorials