Easy notifications in AngularJs applications

April 5, 2015
by Rahil Shaikh

In this tutorial, we learn to display simple notifications in Angular js applications. We will use angular-growl-2 library to make our life easier. The best thing about our approach is that it is, both developer and user-friendly. Which means it looks neat and is pretty easy to implement.

Why we need them

Whenever you are working on an application that involves user interaction especially updating or performing any operation in the database or performing operations where the result is not reflected immediately, you will want to notify the user about the result of that action.

This can be done in multiple ways, if you want to force the user to acknowledge the result you can use alerts or modal windows for better UI, or maybe you can redirect the user to a new page. We will not be using any of these options. Instead, we will be going for a write less and do more kind of an approach.
We will be displaying growl type notifications.

DEMO  DOWNLOAD

We will be using “angular-growl-2” library to implement this.
Angular-growl-2 is library using which we can implement Growl like notifications for angularJS projects, it requires AngularJS and bootstrap css as an external dependency. Basic usage is pretty simple and it comes with handy configuration options.

Initial Setup

Here we have a very skinny initial app setup, lets have a look at our code.

index.html
<style>
    .btn {
        width:100%;
        margin-bottom:3px !important;
    }
</style>
<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
    </head>
    <body ng-app="notifyApp" ng-controller="notifyCtrl">
        <div class="container">
            <div class="col-md-3">
                <div class="form-group">
                    <button class="btn btn-danger" ng-click="showError()">Show error Notification</button>
                    <button class="btn btn-success" ng-click="showSuccess()">Show success Notification</button>
                    <button class="btn btn-warning" ng-click="showWarning()">Show warning Notification</button>
                    <button class="btn btn-info" ng-click="showInfo()">Show info Notification</button>
                    <button class="btn btn-default" ng-click="showAll()">Show all Notifications</button>
                </div>
            </div>
        </div><br />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

In our index file, we’ve included bootstrap css files, angular js 1.3.15 and also our app.js where our js code will be.
We have initialized our app and controller on the body.
We also have five buttons, the first four will show the respective notifications and the fifth one will show all notifications together, we have also specified function calls to ng-click directive on each of them.
Lets have a look at our app.js

var notifyApp = angular.module('notifyApp',[]); //create an angular module
notifyApp.controller('notifyCtrl',['$scope',function($scope){
    $scope.showWarning = function(){<br />
    }
    $scope.showError = function(){<br />
    }
    $scope.showSuccess = function(){<br />
    }
    $scope.showInfo = function(){<br />
    }
    $scope.showAll = function(){<br />
    }
}]);

Here above we have our notifyApp and notifyCtrl, as you can see there is nothing fancy here, we have five functions defined, all of which at this moment do nothing.

Lock and Load

First thing we need to do to use angular-growl is to include its css and js library. We can find the entire project on Github
We can install it using.

bower install angular-growl-v2

Or we can add individual links from these URLs:

JS:https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.min.js

CSS:https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.min.css

index.html
<head>
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
        <link href="css/angular-growl.min.css" rel="stylesheet" media="screen"/>
</head>
<body ng-app="notifyApp" ng-controller="notifyCtrl">
...
...
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="js/angular-growl.min.js"></script>
</body>

Next thing we need to inject angular-growl as a dependency into our module.

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

Finally, we have to add the growl directive in our html, now since we are going to show notifications globally, it is good to add the directive higher up the HTML tree. For this demo, we will be adding the directive just below the start of the body.

index.html
<body ng-app="notifyApp" ng-controller="notifyCtrl">
    <div growl></div> <!-- adding the grow directive to html -->
.. .... ..
.. .. ...
</body>

Notifications in action

So we have completed the basic setup to get the growl notifications initialized, next to use them, we can do the following.

1) Inject growl service into the controller.

We will inject growl into our controller which will provide us with necessary methods to call different kinds of notifications.

app.js
notifyApp.controller('notifyCtrl',['$scope','growl',function($scope,growl){
....
}]);

2) Displaying notification.

Now we will add growl functions to our functions which we had defined earlier on ng-click.

app.js
notifyApp.controller('notifyCtrl',['$scope','growl',function($scope,growl){
    $scope.showWarning = function(){
        growl.warning('This is warning message.',{title: 'Warning!'});
    }
    $scope.showError = function(){
        growl.error('This is error message.',{title: 'Error!'});
    }
    $scope.showSuccess = function(){
        growl.success('This is success message.',{title: 'Success!'});
    }
    $scope.showInfo = function(){
        growl.info('This is an info message.',{title: 'Info!'});
    }
    $scope.showAll = function(){
        growl.warning('This is warning message.',{title: 'Warning!'});
        growl.error('This is error message.',{title: 'Error!'});
        growl.success('This is success message.',{title: 'Success!'});
        growl.info('This is an info message.',{title: 'Info!'});
    }
}]);


There are four different types of notification.

Error:Generally used to display critical errors. growl.error(‘This is error message.’);
Success:Useful to notify users when their operation is successful. growl.success(‘This is a success message.’);
Warning:Display warnings. growl.warning(‘This is a warning message.’);
Info:Notify other general stuff. growl.info(‘This is a info message.’);

That’s it, we have successfully implemented notifications into our application, more importantly without any hassle. Can’t get more easier than this, could it ?

This was just a basic implementation yo get you started, angular-growl-2 comes with a bunch of handy global and isolated configuration.
Displaying messages inline, adding countdown timer(TTL), adding callback functions to close event, changing position of message are few of them.
Visit this link to explore more on different configurations.

Watch Video tutorial

Conclusion

Notifying users is an important part of any web application. Angular-grow-2 provides an easy way to implement them into our angular applications.
So go ahead and try this in your next project.

Credits

JanStevens, click here to view on Github

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

10 comments

  1. john maddock
    |

    very good tutorial, thanks for sharing

    • |

      Your welcome John, thanks for stopping by.

  2. |

    is growl useful for real time apps?

  3. Ale
    |

    Thanks! You made it very simple!

  4. maheshwara reddy
    |

    can we use this for sending notification from one user to another user in an application?

    • |

      Hello, this article takes care of the display part of the notification (UI). What you are intending to do requires work on the backend.

  5. Chandregowda
    |

    Very easy to understand and simple to implement reading the article

  6. |

    hi,
    great tutorial, thanks.
    There is no timeout on the growl notification, please how can I add timeout on the notification.

    Thanks

  7. henry
    |

    i love the way you carefully explained it…very. how do we add fade in and fade out

Leave a Comment