angularjs-toast

angularjs-toast

angularjs-toast is a simple service for creating toast notification for AngularJS pages

live demo here

Getting Started

Installation

You can directly clone/download here

git clone [e-mail]:Sibiraj-S/angularjs-toast.git

or cdn

Minified

//unpkg.com/angularjs-toast@latest/dist/angularjs-toast.min.js
//unpkg.com/angularjs-toast@latest/dist/angularjs-toast.min.css

Pretty Printed

//unpkg.com/angularjs-toast@latest/dist/angularjs-toast.js
//unpkg.com/angularjs-toast@latest/dist/angularjs-toast.css

or

Install via Package managers such as npm, yarn and bower

npm install angularjs-toast --save
# or
yarn add angularjs-toast
# or
bower install angularjs-toast --save

Usage

Import the modules required for angularjs-toast. It is necessary to include ngSanitize and ngAnimate for angularjs-toast to work

<-- styles -->
<link rel="stylesheet" href="angularjs-toast/dist/angularjs-toast.min.css">

<-- scripts -->
<script src="angular/angular.min.js"></script>
<script src="angular-sanitize/angular-sanitize.min.js"></script>
<script src="angular-animate/angular-animate.min.js"></script>

add angularjsToast dependency to the module

angular.module('myApp', ['angularjsToast'])

and in your controller

angular.controller('toastController', ['toast', function(toast){

   toast({
     duration  : 10000,
     message   : "Hi there!",
     className : "alert-success"
   });

}]);

Options

all options are type sensitive

Property	Type	Default	Description
class	string	alert-success	this applies / overrides the CSS for toast elements
duration	number	5000	timeout for each toast messages to disappear
position	string	right	position of the element can be 'left', 'center' and 'right'
container	string	body	appends alert to the specific class or id or element. inputs should be like '.class' or '#id'
masterClass	string	"	adds class to the container for more flexibility in styling
message	html-string or string	Hi there!	can be HTML or plain string
dismissible	boolean	true	show / hide the close icon. if set to false the toast will hide on timeout
maxToast	number	7	maximum number of toast messages to show. if max reached the element inserted first will be removed
insertFromTop	boolean	true	setting true will insert new messages on top else inserts at bottom
removeFromTop	boolean	false	setting true removes last element on timeout else removes first element

Pull Requests

Send Pull Requests only to .coffeescript and .scss files only. JS and CSS files are generated by grunt

• grunt webserver - sets up a local server with livereload

• grunt develop - converts coffeescript files to js and watches for changes and enables livereload

• grunt dist - converts, annotates, minifies coffeescript to js and also converts and minifies scss to css

Changelog

v1.0.5 (2017-07-04)

Documentation

• added cdn links for angularjs-toast in README.md