ng-softnotify

Soft Notifications component powered by angular 2.0+. It can show alert notifications or chat notifications to user on screen without disturbing the current activity.

Project maintained by dreamweiver Hosted on GitHub Pages — Theme by mattgraham

Ng-SoftNotify ·

ng-softNotify is a generic notification component powered by Angular 2.0+. The notifications can be a simple notification like an alert,warning,info or it might be something more intuitive like a chat notification containing subject, msg-body, timestamp, online/offline status etc.,

Live Example

click here Ng-SoftNotify

Installing

Run the below npm or yarn command to install ng-softnotify & its dependencies to your project

npm install ng-softnotify

yarn add ng-softnotify

Main Features

Easy & simple configurations.
Silent Notifications, notifications which wouldnt require any user attention.
Configurable Alert notifications, currently supports (Success, Error, Warning, Info)
Intuitive Chat Notifications which come with predefined lovely avatars (Iron Man, captain america, Ninja turtle, etc.,)
Notifications can be placed on left of right side of the screen. default is right.
Optional event handler to track the notifications when removed from view, mostly needed when working with Chat notifications.

How to use Ng-SoftNotify?

Prerequisites

ng-softnotify uses angular animations for showcasing the notifications on screen, so install & import the BrowserAnimationsModule in your applications root module.

npm install @angular/platform-browser/animations

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 ...

 imports: [
     ...
     BrowserAnimationsModule  
  ],

Importing the SoftNotifyModule

Import SoftNotifyModule in your appllications root module.

 import {SoftNotifyModule} from 'ng-softnotify';

 ...

 imports: [
     ...
     SoftNotifyModule  
  ],

Launching Notification/Alert

Use <ng-softnotify> element in your html template & pass following optional attribute values (this remains as global settings for all notifications displayed within this view or instance)

Direction [input] optional : Flow direction to showcase the notifications, possible values are left-top, right-top (default value).
onDismissNotification [event] (optional): When notifications are dimissed voluntarily or after time elpase, onDismissNotfication would be triggered, user can listen to this event by passing a event handler(function) reference to it.

<ng-softnotify (onDismiss)="onDismissNotification($event)" [direction]="'left-top'"></ng-softnotify>

Import SoftNotifyService from SoftNotifyModule and call launchNotification with appropriate Notification object(Alert notification or Chat notification). Refer to Avatars list(shown below) for various avatars and its code, which has to be passed as value for avatar property.

 ...
    notifications: Notification [] = [ 
      {
          header: 'First Avenger',
          subHeader: 'is offline now',
          body: ' Hi there buddy!!!',
          type: 'chat',
          avatar :'captain-america',
          status : 'offline',
          time: '02:55', 
          autoDismiss:3000 //optional property
        },
        {
          header: 'Data saved successfully',
          subHeader: '',
          body: 'Screen will be updated with latest data',
          type: 'success'
          autoDismiss:50 //optional property
        }];

this.softNotifyService.launchNotification(this.notifications[0]); //launching the notification