Last time I published an article on real-time chat using NodeJS and Socket.io, I didn’t include this module into that application. So in this article am sharing a library to show the notifications in applications like chatting, when a new user joins the Chatroom or any other occasion when you want to show the notification.
This library is in AngularJs as our Chat application was in Angularjs However, you can find the Jquery plugin for the same from toastr in jquery.
Also, read Notification using ng-notify in AngularJs
Now to use this library we need to include three files listed below,
toaster.csstoaster.jsangular-animate.min.js
After including these files, we are good to go.
But before that we have to include these dependencies too in order to use toaster like this,angular.module('sample', ['ngAnimate', 'toaster']);
To create basic toaster we need to create this DOM Element
<toaster-container toaster-options="{'time-out': 3000,'position-class': 'toast-top-right'}"></toaster-container>
After creating this element, we can show the notification by using below line
toaster.pop('success', "Notificaton", "Hello codershood.info", 5000, 'trustedHtml');
In the below code, you will find the various ways to use this library.
index.html
<!DOCTYPE html>
<html ng-app="sample">
<head>
<title>angular-toaster-sample!</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="../libs/angularjs-toaster/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js" ></script>
<script src="http://code.angularjs.org/1.3.3/angular-animate.min.js" ></script>
<script src="../libs/angularjs-toaster/toaster.min.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="HomeController" class="container" >
<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="wait()">Wait notification</button></div>
<div class="col-md-2"><button class="btn btn-primary" href ng-click="pop()">Link to other page</button></div>
</div>
<hr/>
<span>Addding Option from Script:</span>
<div class="rows">
<div class="col-md-6">
<Span>With CLose button</span>
<button class="btn btn-primary" href ng-click="close()">Close Button </button>
</div>
<div class="col-md-6">
<Span>Fade after 1 Sec</span>
<button class="btn btn-primary" href ng-click="timeout()">Html notification</button>
</div>
</div>
<br/>
<hr/>
<span>Custom Notification and Body output type:</span>
<div class="rows">
<div class="col-md-3"><button class="btn btn-primary" href ng-click="Custom_temp()">Custom template</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="trusted_html()">Trusted HTML</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="default_temp()">Default Template</button></div>
<div class="col-md-3"><button class="btn btn-primary" href ng-click="file_custom_temp()">Including file from Folder</button></div>
</div>
<!-- TO show the Notification Basic -->
<toaster-container toaster-options="{'time-out': 3000,'position-class': 'toast-top-right'}"></toaster-container>
<!-- If you Get Null values in your Function by defalut show this Template -->
<script type="text/ng-template" id="toasterBodyTmpl.html">
<p>Null values ! Here is your default template</p>
</script>
<!-- Including Custom template -->
<script type="text/ng-template" id="myTemplate.html">
<div class="Custom_temp_html">
<p>Hello this is my Customm Template</p>
</div>
</script>
<!-- Including Template as well as data from Script -->
<script type="text/ng-template" id="myTemplateWithData.html">
<p>Here it is! {{toaster.data}}</p>
</script>
<!-- Incuding File From another folder -->
<script toaster-options="{'time-out': 3000,'position-class': 'toast-top-center','body-output-type': 'template'}" id="myTemplate" >
<p>it is! </p>
</script>
</div>
</body>
If you see the below code line number 49 used to show the basic toaster as we discussed above. We can also use Custom HTML file which can be from the different folder, see line number 59 and 70.
Now to power our HTML file let’s create script.js to show the notifications.
Script.js
ngular.module('sample', ['ngAnimate', 'toaster'])
.directive('bindUnsafeHtml', [function () {
return {
template: "<span style='color:orange'>Orange directive text!</span>"
};
}])
// The directive that will be dynamically rendered
.directive('bindName', [function () {
return {
template: "<span style='color:orange'>Hi {{directiveData.name}}!</span>"
};
}])
.controller('HomeController', function($scope, toaster, $window,$sce) {
$scope.pop = function(){
//toaster.toast.body='toast-top-center'
toaster.pop('success', "title", 'Its address is https://google.com.', 5000, 'trustedHtml', function(toaster) {
var match = toaster.body.match(/http[s]?:\/\/[^\s]+/);
if (match) $window.open(match[0]);
return true;
});
};
$scope.simple = function(){
toaster.pop('note', "title", "text");
};
$scope.warning = function(){
toaster.pop('warning', "warning",'Hello codershood.info');
};
$scope.success = function(){
//toaster.success({title: "title", body:"text1"});
toaster.pop('success', "Notificaton", "Hello codershood.info", 5000, 'trustedHtml');
};
$scope.error = function(){
toaster.error("Error", "You broke something");
};
$scope.wait = function(){
//toaster.pop({type: 'wait', title: "title", body:"text"});
toaster.wait("Wating","Wating");
};
$scope.Custom_temp = function(){
toaster.pop('warning', "This is my Template", "myTemplate.html", null, 'template');
};
$scope.close = function(){
toaster.pop({
type: 'error',
title: 'Title text',
body: 'Body text',
showCloseButton: true,
closeHtml: '<button>Close</button>'
});
};
$scope.timeout=function(){
toaster.pop('note', "TimeOut", "text");
toaster.toast.timeout=1000;
};
$scope.trusted_html=function(){
toaster.pop('error', "title", '<p class="trustedHtml_text">You directly include HTMl from Script.</p>', null, 'trustedHtml');
};
$scope.default_temp=function(){
toaster.pop('note', "title", null, null, 'template');
};
$scope.file_custom_temp=function(){
toaster.pop('warning', "This is my Template", "templates/Template.html", null, 'template');
};
$scope.position=function(){
toaster.pop('note', "title", 'toast-bottom-left', 'toast-bottom-left', 'tost_id');
console.log(toaster);
}
$scope.goToLink = function(toaster) {
var match = toaster.body.match(/http[s]?:\/\/[^\s]+/);
if (match) $window.open(match[0]);
return true;
};
$scope.clear = function(){
toaster.clear();
};
});
For now, that’s it When I find libraries like this I will always with you guys. You can use this library in your project to enhance the web experience.
Further reading and links:
GitHub page of AngularJs toastr.
If you find this article helpful consider sharing this with other hoodies.
If you get an “Unexpected token <" error on the last script tag of your index.html file, you will likely need to add a "type = 'text/ng-template' " attribute to that script tag.
Thank you Alex, it will other users too.
Hi
So amazing post here we found, I like it and appreciated your works.
Thanx for your kind info.