Windows 10 style sticky notification for angular.js

npm install win10-notif@1.0.5


win10-notif bower npm downloads preview

Windows 10 style sticky notification for angular.js



bower install --save win10-notif

include angular.min.js, angular-animate.min.js, win10-notif.min.js and win10-notif.min.css in head section of your page.

Add thatisuday.win10-notif in your app's dependencies list.


key values default role
title {String} 'Windows!'' Notification title
msg {String} 'Welcome to Windows 10. We have...'' Notification message
hasImg {Boolean} true Whether to show image icon along with notification
imgUrl valid image url 'windows10.png' image to show with notification
bgColor hex, rgba '#333' background color of notification
timeout time in milliseconds, null 5000 hide notification after {timeout} milliseconds. Use null for non-auto-hiding notification.
hasButtons {Boolean} false Show action buttons in notification
hasAccept {Boolean} true Show accept button
hasDecline {Boolean} true Show decline button
acceptText {String} 'Accept' Button text for accept button
declineText {String} 'Decline' Button text for decline button

You can pass HTML string in msg. Please do not abuse this feature, use only <b> and <i>.

Global config

You can config win10-notif globally by using winNotifOpsProvider in config block of your app

.module('myApp', ['thatisuday.win10-notif'])
		bgColor : '#3f51b5',
		acceptText : 'Ok',
		declineText : 'Cancel'


use $winNotif injectable service in your controller to control notification. You can use $ to show notification and $winNotif.hide(callback) to hide notification.


You can pass optional options object while calling show like $ options are the same as global config options mentioned above. But here you can also pass accept and decline 'key:function' pair which are callback for accept and decline user actions.


Hiding notification is pretty simple. You can pass optional callback function like $winNotif.hide(callback).

.controller('myCtrl', function($rootScope, $scope, $timeout, $winNotif){
			timeout : null,
			hasButtons : true,
			accept : function(){
				// Do on accept

			decline : function(){
				// Do on decline

					// Martha!!! Why did you say that name?
	}, 1000);