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! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.

angularjs-toast npm version


Installation can be done via package managers such as npm, yarn and bower

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


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.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>
  <script src="../angularjs-toast.min.js"></script>

add the angularjsToast dependency to the module

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

in your controller

  angular.controller('toastController', ['toast', function(toast){
      duration  : 10000,
      message   : "Hi there!",
      className : "alert-success"


all options are type sensitive

Property Type Default Description
className string alert-success accepted values are alert-(success|danger|primary|info)
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 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