Growl Notification – Step By Step Angular Growl Example

In this Angular tutorial, I’ll guide you through integrating the Growl notification system into your application. Growl allows you to display various types of notifications such as alerts, error messages, and informational messages.

Angular Growl is a notification system that utilizes Bootstrap alert CSS classes. It provides animated message displays with options for showing and closing.

There are the following Features Available in the 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 a timeout message configuration, Which could be global or per message.
• pre-defined $http-Interceptor to automatically handle $http responses for server-sent messages

You can also check another tutorial on angular,

• Angular Loading spinner or Preloading image with finally
• How to integrate swagger with angular

Follow these steps to incorporate Growl notifications:

Step 1: Ensure you have the Growl files. If not, download them from Angular Growl.

Step 2: You need to inject growl within your module using the below syntax or modify the inject list.

var app = angular.module('myApp', ['angular-growl']);

Step 3: Include the Growl directive in your application:

<div growl=""></div>

How to use within angular controller:

app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
    $scope.addSpecialWarnMessage = function() {
        growl.addWarnMessage("This adds a warn message");
        growl.addInfoMessage("This adds an info message");
        growl.addSuccessMessage("This adds a success message");
        growl.addErrorMessage("This adds an error message");
    }
}]);

I hope this helps you. For further information, refer to Angular Growl.