Angular: Notifier (ng-notifier)

Important

This package is suitable to Angular v2.X and v4.X apps.

Usage

Install ng-notifier using npm:

npm install ng-notifier --save

Add NotifierModule into your AppModule class. app.module.ts would look like this:

    import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {AppComponent} from './app.component';
    import {NotifierModule} from 'ng-notifier';
    
    @NgModule({
      imports: [BrowserModule, NotifierModule.forRoot()],
      declarations: [AppComponent],
      bootstrap: [AppComponent],
    })
    export class AppModule {
    
    }

Inject 'NotifierService' class in your component class.

    import { Component, OnInit, ViewContainerRef } from "@angular/core";
    import { NotifierService } from 'ng-notifier';
    
    @Component({
      selector: 'awesome-component',
      template: '<button class="btn btn-default" (click)="showSuccess()">Notifier Tester</button>'
    })
    export class AppComponent implements OnInit {
    
      constructor( private notifier: NotifierService, 
                   private vRef: ViewContainerRef ) {
        
      }
   
       ngOnInit(): void {
           this.notifier.setRootViewContainerRef(this.vRef);
       }
        
      showSuccess() {
        this.notifier.success('You are awesome!', 'Success!');
      }
    
      showError() {
        this.notifier.error('This is not good!', 'Oops!');
      }
    
      showAlert() {
        this.notifier.alert('You are being warned.', 'Alert!');
      }
    
      showInfo() {
        this.notifier.info('Just some information for you.');
      }
    }

NotifierOptions Configurations

By default, the notifier will show up at bottom right corner of the page view, and will automatically dismiss in 3 seconds. You can configure the notifiers using NotifierOptions class. Currently we support following options:

notifierLife: (number)

Determines how long an auto-dismissed notifier will be shown. Defaults to 3000 miliseconds. If you set it to 0, the notifier will not auto-dismiss.

maxStack: (number)

Determines maximum number of notifiers can be shown on the page in the same time. Defaults to 5.

position: (Array)

Determines where on the page the notifier should be shown. Here are list of values:

['bottom', 'right'] (Default)
['bottom', 'center']
['bottom', 'left']
['top', 'right']
['top', 'center']
['top', 'left']

messageClass: (string)

CSS class for content within notifier.

titleClass: (string)

CSS class for title within notifier.

animate: (string)

You have following choice: 'fade', 'flyLeft' or 'flyRight'.(Defaults to 'fade')

fade: makes every notifier either fade in or fade out.
rotate: makes every notifier either rotate in or rotate out.
scale: makes every notifier either scale in or scale out.
flyLeft: makes every notifier fly in from left side.
flyRight: makes every notifier fly in from right side.

Use dependency inject for custom configurations. You can either inject into app.module.ts or any component class:

    import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {AppComponent} from './app.component';
    import {NotifierModule, NotifierOptions } from 'ng-notifier';
    
    let options: NotifierOptions = new NotifierOptions({
      animate: 'flyRight',
      position: ['top', 'right'],
      notifierLife: 4000
    });
        
    @NgModule({
      imports: [
          BrowserModule, 
          NotifierModule.forRoot(options),
        ],
      declarations: [AppComponent],
      bootstrap: [AppComponent],
    })
    export class AppModule {
    }

Override global option:

You can also override notifierLife, titleClass, messageClass, animate, options for individual notifier:

this.notifier.sucess('This notifier will dismiss in 10 seconds.', null, {notifierLife: 10000});
this.notifier.info('This notifier will have "new-title" class in its title', null, {titleClass: 'new-title'});

DanielYKPan/ng-notifier