Follow @Sibiraj-S Fork Download angularjs-toast

angularjs-toast demo

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

---

Sample alerts. Click on any following buttons to see toasts in action

Here it is configured to display inside container using `container` propery

Success Warning Danger Info

angularjs-toast

Installation

Installation can be done 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

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

  <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 the angularjsToast dependency to the module

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

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 (optional)
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	6	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

---

^*more options will be added