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 use cdn

Minified:

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.js
//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.css

Pretty Printed:

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.js
//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.css

or

Install via Package managers such as npm or yarn

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

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.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>
<script src="../angularjs-toast.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
className	string	alert-success	accepted values are alert-(success
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	false	setting true will insert new messages on top else inserts at bottom
removeFromTop	boolean	false	setting true removes first element when maxToast is reached else removes last element

Changelog

v2.0.3 (2018-12-30)

Enhancements

• migrate from unpkg cdn to jsdelivr (41e42bc)

Internal

• extend package license to 2019 (db6ee74)
• replace eslint-config-standard with eslint-config-airbnb-base (902e33e)
• replace grunt-contrib-sass with grunt-sass (902e33e)

Dependency Updates

• update eslint to v5.11.1 (902e33e)
• update husky to v1.3.1 (902e33e)
• update grunt-coffeelintr to v1.1.2 (902e33e)
• update other angular dependencies (902e33e)