In this article am going to share another AngularJs module for notifications called ng-notify. ng-notify is simple, lightweight module for displaying notifications in your AngularJS app. In case, if you don’t want to use modules likes toastr to show the notifications, ng-notify can help you to show the notifications.Showing Notification using ng-notify can enrich your web experience.
Here is GitHub link, from where you can download the file or clone it.
Also, read Showing notification using toaster in AngularJs
You can install ng-notify with Bower.
bower install ng-notify –save
You can also install ng-notify with npm.
npm install ng-notify –save
In order to use ng-notify, you have to include to file shown below.
ng-notify.min.jsng-notify.min.css
After Injecting and defining ng-notify, we can use it to show the notifications.
- Injecting the ng-notify provider to our AngularJs app
angular.module('sample', ['ngNotify']); - Defining ngNotify in our controller
angular.controller('Controller', function($scope,ngNotify){ ---- });
To display a notification, we will use set method.for example,
ngNotify.set('Hello codershood.info!');Now to specify the type of notification to display, we need to add one more parameter.for eg.
ngNotify.set('Hello codershood.info!','success');Types parameter to display notifications.
- success
- error
- grimace
- warn
I have prepared a very simple example to demonstrate how it works.
index.html
<!DOCTYPE html>
<html ng-app="sample">
<title>Ng-notify Sample</title>
<head>
<title>angular-atomic-notify sample!</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="ng-notify.min.css">
</head>
<body>
<div ng-controller="HomeController" class="container" id="top">
<span>Simple Notifications:</span>
<div class="rows">
<div class="col-md-2"><button class="btn btn-primary" href ng-click="simple()">Simple notification</button></div>
<div class="col-md-2"><button class="btn btn-warning" href ng-click="warning()">Warning notification</button></div>
<div class="col-md-2"><button class="btn btn-success" href ng-click="success()">Success notification</button></div>
<div class="col-md-2"><button class="btn btn-danger" href ng-click="error()">Error notification</button></div>
<div class="col-md-2"><button class="btn btn-grimace" href ng-click="grimace()">Grimace notification</button></div>
</div>
<hr/>
<span>Chaning Time and Position:</span>
<div class="rows">
<div class="col-md-3"><button class="btn btn-primary" href ng-click="sticky()">Sticky notification</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="time()">Specific Time notification</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="top()">Position change notification</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="html()">Html notification</button></div>
</div>
<hr/>
<span>Custom Notification and Themes:</span>
<div class="rows">
<div class="col-md-6"><button class="btn btn-primary" href ng-click="Custom_notf()">Custom notification</button></div>
<div class="col-md-6"><button class="btn btn-primary" href ng-click="Custom_theme()">Custom theme</button></div>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.js"></script>
<script type="text/javascript" src="ng-notify.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
In above file, We have functions to trigger the notifications.If you notice below on line number in script.js file I have, ngNotify.config({ html: true }); to override the default settings.
ng-notify provides following options to override the default settings.
- theme: string – optional – sets the theme to use, altering the styles for each notification type.
- pure (default)
- prime
- pastel
- pitchy
- type: string – optional – sets the default notification type when a type isn’t explicitly set.
- info (default)
- error
- success
- warn
- grimace
- position: string – optional – sets where the notifications will be displayed at in the app.
- bottom (default)
- top
- duration: the duration the notification stays visible to the user, in milliseconds.
- sticky: determines whether or not the message will fade at the end of the duration.
- button: bool – optional – determines whether or not the dismiss button will show on sticky notifications.
We can use these configs in individual notifications shown below in the example.
script.js
'use strict';
angular
.module('sample', ['ngSanitize','ngNotify'])
.controller('HomeController', function($scope,ngNotify){
ngNotify.config({
html: true
});
$scope.simple = function(){
ngNotify.set('Your notification message goes here!');
};
$scope.warning = function(){
ngNotify.set('warning message goes here!','warn');
};
$scope.success = function(){
ngNotify.set('Success message','success');
};
$scope.error = function(){
ngNotify.set('Error msg','error');
};
$scope.grimace = function(){
ngNotify.set('WWW.CODERSHOOD.INFO ','grimace');
};
$scope.sticky = function(){
ngNotify.set('Click X button to close the message.', {
sticky: true
});
};
$scope.time = function(){
ngNotify.set('After 3 sec I will fade.', {
duration: 3000
});
};
$scope.top = function(){
ngNotify.set('Position Changed.', {
position: 'top'
});
};
$scope.html = function(){
ngNotify.set('This has <b class="html">HTML</b> content!', {
html: true
});
};
$scope.Custom_notf = function(){
ngNotify.addType('own', 'my-notice-type');
var html='<div class="rows"><div class="col-md-9">This looks like Android Snackbar.</div><div class="col-md-3"><a href="#top">Click Me</a></div></div>';
ngNotify.set(html,{
type: 'own',
sticky: true
});
};
$scope.Custom_theme = function(){
ngNotify.addTheme('newTheme', 'my-new-theme');
ngNotify.config({
theme: 'newTheme'
});
ngNotify.set("Hello this is Custom Theme",{
type: 'grimace'
});
//Try info warn success error
};
});
If you find this article helpful consider sharing this with hoodies.
After running the app on my machine, I noticed two differences from the online demo. One, my “Grimace notification” button had a gray background, and two, my custom notification message had a white background. When I inspected the demo version, I noticed a reference to a css file that is not mentioned in the tutorial. Therefore I had to inline the following style inside the ‘head’ section of the index.html file:
.my-notice-type{background-color: #323232; color: #fff} .btn-grimace{background-color: #8058a5; color: #fff}