Skip to content

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.

License

Notifications You must be signed in to change notification settings

dreamweiver/ng-softnotify

Repository files navigation

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

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

Cool avatars available for Chat Notification (use code)

  • Iron Man (iron-man) iron_man
  • Captain America (captain-america) iron_man
  • Scream (scream) iron_man
  • Ninja Turle (ninja-turtle) iron_man
  • Astronaut (astronaut) iron_man
  • Alien (alien) iron_man
  • Theatre Mask (theatre-mask) iron_man
  • Martian (martian) iron_man
  • Predator (predator) iron_man

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

  • Special thanks to icon8 team for giving lovely avatars