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


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



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: [

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)


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


We use SemVer for versioning.



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


  • Special thanks to icon8 team for giving lovely avatars