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 · GitHub license npm version

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

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)

<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


Cool avatars available for Chat Notification (use code)

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests

Versioning

We use SemVer for versioning.

ChangeLog is available here.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments