Ng-notify – a simple and lightweight library for AngularJs

Ng-notify is a simple and lightweight notification library for AngularJs apps. This library doesn’t required any dependencies except angular.js. Animation is achieved with pure JS & lightweight module (~5.5 kBs. js and css combine). You can use HTML in your message. Set a global configuration for each and every notification in your app.

Installation :

Install using bower

bower install ng-notify --save

Install using npm

npm install ng-notify --save

As of v0.6.0, ng-notify is now available via the jsDelivr CDN if you’d prefer to go down that route.

//cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.js
//cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.css

Example :

//cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.js
//cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.css

Aways you can direct download the source file from this repository – files are located in dist folder, be sure to use minified version of both js and css.

Usage :

After adding ng-notify.min.js and ng-notify.min.css inject ng-notify provider into your module.

var app = angular.module('demo', ['ngNotify']);

Now you can show notification from anywhere in your app, just use set method.

ngNotify.set('Your notification message goes here!');

If you want to specify the type of notification (success, warning, info etc.) then specify it as second parameter.

ngNotify.set('Your error message goes here!', 'error');

Default Configuration :

ngNotify.config({
    theme: 'pure',
    position: 'bottom',
    duration: 3000,
    type: 'info',
    sticky: false,
    button: true,
    html: false
});

You can override the default configuration by using config method, you can also set the individual configuration for each and every notification.

ngNotify.set('Your first message.', {
    position: 'top',
    sticky: true
});

ngNotify.set('Your second message.', {
    type: 'error',
    duration: 2000
});

Sticky Notification :

This allows you to set a notification which is does not fade away, to do simply set sticky attribute to true,

ngNotify.set('This is sticky.', {
    sticky: true
});

HTML Notification :

This allows you to show html content in notification, to do this set the html attribute to true.

ngNotify.set('This has HTML content!', {
    html: true
});

Callbacks :

After a notification is completed then you can add a callback for further logic. This callback only set through set method and is passed an optional third parameter.

ngNotify.set('This message has a callback.', {}, function() {
   // your logic here
});

For more info please visit following url :

ng-notify: https://github.com/matowens/ng-notify

github: https://github.com/matowens/ng-notify