Angular Toast Notifications provider

How to implement a beautiful toast message in the Angular application?

Simple Toast messages powered by ngx-awesome-popup

Writing a bunch of code in HTML just to open nice toast is ok if you have time, but in practice is better to open the popup just by calling the method from the typescript.

It’s the npm package ngx-awesome-popup! Well-documented angular library for Toast notifications, cookie banner, confirm box, dynamic dialog, and a few more. In this tutorial, we will go through the toast notification setup.

Step 1; install the library

npm i @costlydeveloper/ngx-awesome-popup

Step 2; configure the main application module

To be able to use this library, it is essential to import NgXAwesomePopupModule and ToastNotificationConfigModule inside your main application module (usually named AppModule), using forRoot method.

Add bolded lines to your app.module.ts

@NgModule({
  imports: [
  NgxAwesomePopupModule.forRoot(),     
  ToastNotificationConfigModule.forRoot()
],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

import { NgxAwesomePopupModule, ToastNotificationConfigModule } from ‘@costlydeveloper/ngx-awesome-popup’;

Step 3; create a method in any component to evoke the toast message.

openToast() {         
 const newToastNotification = new ToastNotificationInitializer();
 newToastNotification.setTitle('Title');
 newToastNotification.setMessage('Your message!');
 newToastNotification.setConfig({
   // Choose layout color type         
   LayoutType: DialogLayoutDisplay.SUCCESS,
  });
 newToastNotification.openToastNotification$();
}

Change the toast message style (DialogLayoutDisplay) between SUCCESS | INFO | NONE | DANGER | WARNING.

import { ToastNotificationInitializer, DialogLayoutDisplay } from ‘@costlydeveloper/ngx-awesome-popup’;

Step 4; anywhere in your component call the openToast().

this.openToast()

That is it, a simple way to evoke a toast message in Angular, for advanced options use the snippet generator below.

Ngx Awesome Popup, the modern tool

Thanks for reading!