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:;;;; -
Inject 'NotifierService' class in your component class.
;;
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'
- ['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:
; ; ; ; ;
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'});