Ng-SoftNotify

Soft Notification component developed using Angular 5.0 to show silent notification like chat or alert to the user on screen without disturbing the current operation on screen.

View on GitHub

Ng-SoftNotify

Soft Notifications component developed using Angular 5.0 to show silent chat notification or alert notificataion to user on screen without disturbing the current operation on screen.

Live Example

Ng-SoftNotify

Installing

Run the below script to install on dependencies on the root directory after cloning the project

npm install

Main Features

  • Silent Notifications on screen without distubing content
  • Multiple alert notifications available via configuration (Success, Error, Warning, Info)
  • Chat Notifications can also be generated with lovely avatars (Iron Man, captain america, Ninja turleetc.,)
  • Auto dissmiss functionality with callback
  • simple configuration

How to use Ng-SoftNotify?

Importing the SoftNotifyModule

Import SoftNotifyModule in your app’s module by placinng it in imports array.

 import { SoftNotifyModule } from './softNotify/softNotify.module';

 ...

 imports: [
     ...
     SoftNotifyModule  
  ],

Launching Notification/Alert

Use <ng-softnotify> element in your target html template and pass a callback to subscribe for onDismissNotification event.

<ng-softnotify (onDismiss)="onDismissNotification($event)"></ng-softnotify>

Import SoftNotifyService from SoftNotifyModule and call launchNotification with appropriate Notification object(Alert notification or Chat notification).

 ...
    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]); //lauching the notification


Cool avatars available for Chat Notification (use code)

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

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.

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