Fork me on GitHub


Angular provider for toast notifications

View the Project on GitHub tameraydin/ngToast


ngToast is a simple Angular provider for toast notifications.


Create a sample toast


Download ngToast manually or install it through NPM / Bower:

bower install ngtoast --production
# or
npm install ng-toast --production

Include ngToast resource files along with the built-in ngAnimate & ngSanitize modules and the Bootstrap CSS (only the Alerts component is used as style base, so you don't have to include complete CSS):

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ngToast.min.css">

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

Include ngToast as a dependency in your app module:

var app = angular.module('myApp', ['ngToast']);

Place toast (or ng-toast, if you are using a version lower than 1.2.1) element into your HTML:


Inject ngToast provider in your controller:

app.controller($scope, ngToast) {...};

Please check out Github page to see how to use ngToast with animations.


// create a simple toast:
ngToast.create('a toast message...');

// create a toast with settings:
  className: 'warning',
  content: '<a href="#" class="">a message</a>'

// or just use "success", "info", "warning" or "danger" shortcut methods:
var myToastMsg = ngToast.warning({
  content: '<a href="#" class="">a message</a>'

// to clear a toast:

// clear all toasts:


Property Default Description
content '' Content of the toast message as string (HTML is supported). (string)
className 'success' Class name to be added on toast message with 'alert-' prefix. See Bootstrap Alerts for possible options. (string)
dismissOnTimeout true Allows toast messages to be removed automatically after a specified time. (boolean)
timeout 4000 Wait time for removal of created toast message. (number)
dismissButton false Appends specified close button on toast message. (boolean)
dismissButtonHtml '&times;' HTML of close button to append. (string)
dismissOnClick true Allows toasts messages to be removed on mouse click. (boolean)
onDismiss null A callback that will be triggered whenever a toast message is dismissed. Context of the function will be the message object. (function)
compileContent false Re-compiles the toast message content within parent (or given) scope. Needs to be used with trusted HTML content. See here for more information. (boolean|object)
animation* '' Built-in animation type for toast messages: 'slide' or 'fade' (string)
additionalClasses* '' Additional class name(s) to add toast messages. (string)
horizontalPosition* 'right' Horizontal position of toast messages: 'right', 'left' or 'center' (string)
verticalPosition* 'top' Vertical position of toast messages: 'top' or 'bottom' (string)
maxNumber* 0 Maximum number of toast messages to display. (0 = no limit) (number)
combineDuplications* false If enabled, toast messages with the same content & type will be merged and the count number will be displayed at the beginning of message. (boolean)
newestOnTop* true Adds newly created toast messages on top of old ones. (boolean)
* Available only at configuration level. Rest of setting properties can be overwritten at individual toast message.