Notification-manager NPM

notification-manager

Notification manager for Angular applications.

Getting Started

Installation:

npm install notification-manager

Imports:

import {NgModule} from '@angular/core';
import {NotificationManagerModule} from 'notification-manager';
import {NotificationManagerService} from 'notification-manager';
import {Root} from './root.component';
@NgModule({
    imports: [
        NotificationManagerModule
    ],
    declarations: [Root],
    providers: [],
    bootstrap: [Root]
})
export class RootModule {
  
  constructor(private notificationManagerService: NotificationManagerService) {
    // custom setting for notification manager (optional)
    this.notificationManagerService.getBaseSettings().getCommon().setDuration(10000);
  }
  
}

Usage:

import {Component} from '@angular/core';
import {NotificationManagerService} from 'notification-manager';
@Component({
    selector: 'root',
    template: `
            <nm-notification-manager></nm-notification-manager>`
})
export class Root {

    constructor(private notificationManagerService: NotificationManagerService) {
         // create notification
         this.notificationManagerService.success('Your text');
         
         // create notification with options
         this.notificationManagerService.success('Your text', {
           static: true
         });
     }
     
 }

Notifications types:

Example for creating notifications:

this.notificationManagerService.success('Your text');

success() - green background.
error() - red background.
warning() - yellow background.
info() - blue background.

Notification options:

Example for creating notification with options:

this.notificationManagerService.success('Your text', {
  static: true
});

All options are optional.

static: boolean
If true, notification does not remove automatically.
Default: false

Customization:

You can customize notification manager using setting from service.

Example for setting notifications duration:

this.notificationManagerService.getBaseSettings().getCommon().setDuration(10000);

getBaseSettings()
Common settings
getCommon()
Notification duration
setDuration(number) - Must be more than 0 in milliseconds.
Default: 7000
Notification opacity
setOpacity(number) - CSS opacity style.
Default: 0.9
Notification font size
setFontSize(string) - CSS font-size style.
Default: 15px
Max width of notifications
setMaxWidth(string) - CSS max-width style.
Default: 270px
Border radius of notifications
setBorderRadius(string) - CSS border-radius style.
Default: 2px
Animation mode
setAnimationMode(string) - 'vertical' or 'horizontal'.
Default: vertical
Notifications sound
setSound(string) - sound.
Sound variants:
notification_1
notification_2
notification_3
notification_4
notification_5
Default: none
Color settings
getColor()
Background color for error() notification
setError(string) - CSS color style.
Default: #F44336
Background color for success() notification
setSuccess(string) - CSS color style.
Default: #8BC34A
Background color for warning() notification
setWarning(string) - CSS color style.
Default: #FFC107
Background color for info() notification
setInfo(string) - CSS color style.
Default: #2196F3
Font color for error() notification
setFontError(string) - CSS color style.
Default: #FFFFFF
Font color for success() notification
setFontSuccess(string) - CSS color style.
Default: #FFFFFF
Font color for warning() notification
setFontWarning(string) - CSS color style.
Default: #FFFFFF
Font color for info() notification
setFontInfo(string) - CSS color style.
Default: #FFFFFF
Position settings
getPosition()
Vertical positioning of notifications
setVertical(string) - 'top' or 'bottom'
Default: top
Horizontal positioning of notifications
setHorizontal(string) - 'left' or 'right'
Default: right