Notify

This library was generated with Angular CLI version 17.1.0.

Angular Notification Toaster Module (notify-toaster)

The library provides a notification which is written in Angular and it is dependent on native angular

Guide:

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

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

2. Add NotifyModule to AppModule by importing it from notify-toaster package

    import { NotifyModule } from 'notify-toaster';
    
    @NgModule({
      imports: [NotifyModule],
      ...
    })
    export class AppModule {
    }

3. 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 {
   }

4. Create a placeholder for the app-notify-container componenet in your app.component.html

    <app-notify-container></app-notify-container>

5. Inject the NotifyService into your component

    constructor(private notifyService: NotifyService) { }

6. 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.,
  • success
  • update
  • warning
  • info
  • delete

7. To show the toast message you should be calling the show() method that takes only two argument, type of notification and messsage

pushSuccess() {
  this.notification.show('success', 'This is a success alert');
}

8. 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.

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

pushSuccess() {
  this.notification.show('success', 'This is a success notification');
}
pushUpdate() {
  this.notification.show('update', 'This is a update notification');
}
pushWarn() {
  this.notification.show('warning', 'This is a warning notification');
}
pushInfo() {
  this.notification.show('info', 'This is a info notification');
}
pushDelete() {
  this.notification.show('delete', 'This is a delete notification');
}

For LIVE DEMO checkout the notify-toaster