angularjs-toast

angularjs-toast

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

Live demo here

If you are looking for Angular(v5.x) version, Try ngx-notifier

Getting Started

Installation

You can directly clone/download here

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

or use cdn

Minified

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

Pretty Printed

//unpkg.com/angularjs-toast@latest/angularjs-toast.js
//unpkg.com/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	true	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

v1.0.16 (2018-07-27)

Just a Maintenance Patch

Internal

• remove commitizen, cz-conventional-changelog
• prevent running npm publish directly
• lint all js files using eslint