notify-toaster
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

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

  1. Add NotifyModule to AppModule by importing it from notify-toaster package
    import { NotifyModule } from 'notify-toaster';
    
    @NgModule({
      imports: [NotifyModule],
      ...
    })
    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 app-notify-container componenet in your app.component.html
    <app-notify-container></app-notify-container>

  1. Inject the NotifyService into your component
    constructor(private notifyService: NotifyService) { }

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

  1. 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');
}

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

Package Sidebar

Install

npm i notify-toaster

Weekly Downloads

3

Version

0.0.4

License

MIT

Unpacked Size

40.8 kB

Total Files

20

Last publish

Collaborators

  • adityasingh-bot