Norse Polytheistic Mythology
    Have ideas to improve npm?Join in the discussion! »

    ngx-notifier
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.0 • Public • Published

    NgxNotifier

    angular

    A Simple Notification Service for Angular Applications

    Tests Status npm version npm downloads license

    Getting Started

    ngx-notifier is a simple notification service for Angular applications and is meant to be simple with limited features. Applications using bootstrap4 can make use of it to make simple toast notifications.

    If you are looking for angularjs(1.x) version, Try angularjs-toast

    Installation

    Install via Package managers such as npm or yarn

    npm install ngx-notifier --save
    # or 
    yarn add ngx-notifier

    Usage

    Import NgxNotifierModule and BrowserAnimationsModule

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { NgxNotifierModule } from 'ngx-notifier';
     
    @NgModule({
      imports: [ BrowserAnimationsModule, NgxNotifierModule ]
    })

    Import bootstrap-4 into your application, which is a must

    Then in HTML

    <ngx-notifier></ngx-notifier>

    Then in TS

    import { NgxNotifierService } from './ngx-notifier/services/ngx-notifier.service';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers: [AppService]
    })
     
    export class AppComponent {
      constructor(private ngxNotifierService: NgxNotifierService) { }
     
      createNotification(){
          this.ngxNotifierService.createToast(message:string, style:string, durationnumber);
      }
    }

    Create a toast

    this.ngxNotifierService.createToast(message:string, style:string, durationnumber);
    • message message to be sent as notification
    • style notification style, which can be the following primary|secondary|success|danger|warning|info|light|dark. Default is info
    • duration in milliseconds, timeout for the notification

    Clear all toasts

    this.ngxNotifierService.clear();

    Clear the last toast

    this.ngxNotifierService.clearLast();

    Notifier Component

    Notifier component accepts

    <ngx-notifier [allowDuplicates]="true"
                  [allowHTML]="false"
                  [className]="myCustomClassName"
                  [duration]="5000"
                  [disableAnimations]="false"
                  [dismissOnClick]="false"
                  [insertOnTop]="true"
                  [max]="5">
    </ngx-notifier>
    • allowDuplicates: whether to allow duplicate messages in notifications
    • allowHTML whether to allow or display HTML as it is, HTML will be sanitized and any JS will be maked as unsafe.
    • className custom class for notifications
    • disableAnimations whether to enable or disable animations for the toast.
    • dismissOnClick: dismiss notification on click
    • duration time in milliseconds for dismissing notifications, default is 60s
    • insertOnTop whether to insert notification on top or bottom
    • max: maximum number of notifications to be displayed

    Demo

    Demo at stackblitz ngx-notifier

    Documentation

    Documentation is auto-generated using compodoc, and can be viewed here: https://sibiraj-s.github.io/ngx-notifier/

    Install

    npm i ngx-notifier

    DownloadsWeekly Downloads

    146

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar