Toaster Notification in Angular 16

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *