ngx-toaster

Native Angular Toaster Module (ngx-toaster)

The library provides a toast notification which is written in native Angular and it is dependent on bootstrap, angular native animation.

Guide:

1. Install the ngx-toaster using npm npm install ngx-toaster

• Note : Use the regular npm flags such as - --save to include under dependencies in package.json. - -g to install it globally

---

1. Add ToasterModule to AppModule by importing it from ngx-toaster package

    import { ToasterModule } from 'ngx-toaster/src/lib';
    
    @NgModule({
      imports: [ToasterModule],
      ...
    })
    export class AppModule {
    }

---

1. As this library uses Angular animations. BrowserAnimationsModule should also be imported to the app.module.

• Note : Further exploration of @angular/animations module can be referred here, official documentation.

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

   @NgModule({
     imports: [BrowserAnimationsModule],
     ...
   })
   export class AppModule {
   }

---

1. Create a placeholder for the ngx-toast-notification componenet in your app.component.html

    <ngx-toast-notification></ngx-toast-notification>

---

1. Inject the ToasterService into your component

    constructor(private toasterService: ToasterService) { }

---

1. The toast message configuration contains following properties
   

Property	Data Type	Mandatory	Default Value	Usage
id	string	No	----------	Auto generated for each notification
message	string	Yes	----------	The user defined toast message
autoHide	boolean	No	true	This will hide the message
displayDuration	number	No	5000(milli seconds)	Timeout Duration can be set using this property
showCloseButton	boolean	No	true	Close button can be seen for manually closing it
toastType	ToastType	Yes	----------	Type of the toast message can be set htere

• where ToastType is a enumeration type that determines the type of the notification which takes a five values viz.,
  • ERROR
  • WARNING>
  • SUCCESS
  • INFORMATION
  • EMPTY

---

1. To show the toast message you should be calling the showToastMessage() method that takes toastMessageConfiguration as its argument

  let toastNotificationConfiguration: ToastNotificationConfiguration = {
            message: 'Sample Toast message',
            displayDuration: 1000,
            autoHide: true,
            showCloseButton: true,
            toastType: ToastType.INFORMATION
   };
   this.toasterService.showToastMessage(toastNotificationConfiguration);

---

1. To manually close a particular toast message set the autoHide property as false and showCloseButton property as true which displays a close button using which the message can be manually closed.

---

1. To hide all the toast messages you should be using the clearAllToastMessages() method.

    this.toastNotificationService.clearAllToastMessages();

---

1. To show multiple toast messages you can call the showToastMessage() multiple times by configuring the notification object as you wish

  let informationalToastNotificationConfiguration: ToastNotificationConfiguration = {
            message: 'Informational Toast message',
            displayDuration: 1000,
            autoHide: true,
            showCloseButton: false,
            toastType: ToastType.INFORMATION
   };
    this.toasterService.showToastMessage(informationalToastNotificationConfiguration);
    
    let errorToastNotificationConfiguration: ToastNotificationConfiguration = {
            message: 'Error Toast message',
            autoHide: false,
            toastType: ToastType.ERROR
    };
    this.toasterService.showToastMessage(errorToastNotificationConfiguration);
    
    let successToastNotificationConfiguration: ToastNotificationConfiguration = {
            message: 'Success Toast message',
            autoHide: false,
            toastType: ToastType.SUCCESS
    };      
    
    this.toasterService.showToastMessage(successToastNotificationConfiguration);

For LIVE DEMO checkout the plunker