Nettle Pie Market

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

    10.0.0 • Public • Published

    angular

    NgxNotifier

    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.

    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 ]
    })

    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, duration: number);
      }
    }

    Create a toast

    this.ngxNotifierService.createToast(message:string, style:string, duration: number);
    • message message to be sent as notification
    • style notification style, which can be the following success|danger|warning|info. 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

    Install

    npm i ngx-notifier

    DownloadsWeekly Downloads

    229

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    115 kB

    Total Files

    20

    Last publish

    Collaborators

    • sibiraj-s