Notification with Angular growl

Hello Steemit friends. On this occasion I will write a tutorial on Making Web Notification with Angular growl. As its name notification serves to notify the user if there is a certain warning

Angular growl is a notification system which is using bootstrap alert css classes. Growl shows message with animation on showing and closing options.
There are following Features Available in Growl Notification System :
• Growl like notifications like in MacOS X
• Growl using standard bootstrap classes like alert, alert-info, alert-error and alert-success.
• You can set timeout message configuration, That could be global or per message.
• pre-defined $http-Interceptor to automatically handle $http responses for server-sent messages

How to use it ?

Step 1. we can use Angular growl for our angular application, first download angular growl at https://github.com/marcorinck/angular-growl

Step 2. We need inject growl with our module using this script :
var app = angular.module('myApp', ['angular-growl']);

Step 3. Call Growl directory in your application

Step 4. Setup angular controller

Ok, above is the theory we are now implementing, in this opportunity i will guide you using angular growl in your project
After you download, then create a file with the name index.html

Explanation script:
• Customize the load of files needed with each folder
• Angular growl makes a directive called growl, so to use it do not forget to write directive growl
• Growl.addSuccessMessage (“Pesan warning”,{ttl: 2000}; we can settiG how long this notification will appear in seconds

Next create the app.js file,


var app = angular.module("app", ['angular-growl']);
app.config(['growlProvider', function(growlProvider) {
growlProvider.globalTimeToLive(5000);
}]);

Explanation script:
• Set angular growl depedency in the app module, because angular growl is based on angular module, so we need angular growl depedency
• growlProvider.globalTimeToLive(5000); set global time for notifications

ok, now try running in browser, then click the buttons that are in the top left corner, it will show the notification on the right

If you want to custom your notification, you can use below configuration

Configuration

Only unique messages

• Default: true
Accept only unique messages as a new message. If a message is already then this message will not be added to the displayed message list. Set to false, to always display all messages regardless if they are already displayed or not:

var app = angular.module('myApp', ['angular-growl']);
app.config(['growlProvider', function(growlProvider) {
growlProvider.onlyUniqueMessages(false);
}]);

Automatic closing of notifications (timeout, ttl)

• Default: none (all messages need to be closed manually by the user.)
you have to configure this during config phase of angular bootstrap like this:

var app = angular.module('myApp', ['angular-growl']);
app.config(['growlProvider', function(growlProvider) {
growlProvider.globalTimeToLive(5000);
}]);

This sets a global timeout of 5 seconds after which every notification will be closed.
You can override TTL generally for every single message if you want:

app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
$scope.addSpecialWarnMessage = function() {
growl.addWarnMessage("Override global ttl setting", {ttl: 10000});
}
}]);

This sets a 10 second timeout, after which the notification will be automatically closed.
If you have set a global TTL, you can disable automatic closing of single notifications by setting their ttl to -1:

app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
$scope.addSpecialWarnMessage = function() {
growl.addWarnMessage("this will not be closed automatically even when a global ttl is set", {ttl: -1});
}
}]);

Allow HTML in messages

• Default: false
Turn this on to be able to display html tags in messages, default behaviour is to NOT display HTML.
For this to work, you have to declare a dependency to "ngSanitize" (and load the extra javascript) in your own application module!

var app = angular.module('myApp', ['angular-growl', 'ngSanitize']);
app.config(['growlProvider', function(growlProvider) {
growlProvider.globalEnableHtml(true);
}]);

You can override the global option and allow HTML tags in single messages too:
app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
$scope.addSpecialWarnMessage = function() {
growl.addWarnMessage("This is a HTML message", {enableHtml: true});
}
}]);

until here tutorial angular growl usage, quite easy to use it, may be useful for you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---