AngularJS Toaster is a customized version of "toastr" non-blocking notification javascript library.

Angular Core Dependency: >1.2.6

Module License: MIT

Added by: Sam Deering





Stars: 1245

Watchers: 1245

Forks: 285



Module Description


AngularJS Toaster is an AngularJS port of the toastr non-blocking notification jQuery library. It requires AngularJS v1.2.6 or higher and angular-animate for the CSS3 transformations. (I would suggest to use /1.2.8/angular-animate.js, there is a weird blinking in newer versions.)

Current Version 0.4.12


  • Simple demo is at
  • Older versions are or or (with version 0.4.5)
  • Older version with Angular 1.2.0 is placed at
  • Older version with Angular 1.2.0-rc.2 is placed at
  • Older version with Angular 1.1.5 is placed at

Getting started

Optionally: to install with bower, use:

bower install --save angularjs-toaster
  • Link scripts:
<link href="" rel="stylesheet" />
<script src="" ></script>
<script src="" ></script>
<script src=""></script>
  • Add toaster container directive:
  • Prepare the call of toaster method:
    // Display an info toast with no title
    angular.module('main', ['toaster'])
    .controller('myController', function($scope, toaster) {
        $scope.pop = function(){
            toaster.pop('success', "title", "text");
  • Call controller method on button click:
<div ng-controller="myController">
    <button ng-click="pop()">Show a Toaster</button>

Close Button

The Close Button's visibility can be configured at three different levels:

  • Globally in the config for all toast types:
<toaster-container toaster-options="'close-button': true"></toaster-container>
  • Per info-class type: By passing the close-button configuration as an object instead of a boolean, you can specify the global behavior an info-class type should have.
<toaster-container toaster-options="{'close-button': { 'toast-warning': true, 'toast-error': false } }"></toaster-container>

If a type is not defined and specified, the default behavior for that type is false.

  • Per toast constructed via toaster.pop('success', "title", "text"):
                type: 'error',
                title: 'Title text',
                body: 'Body text',
                showCloseButton: true

This option is given the most weight and will override the global configurations for that toast. However, it will not persist to other toasts of that type and does not alter or pollute the global configuration.

Other Options

// Change display position
<toaster-container toaster-options="{'position-class': 'toast-top-full-width'}"></toaster-container>


Unlike toastr, this library relies on ngAnimate and CSS3 transformations for animations.


Jiri Kavulak


Inspired by


Copyright © 2013 Jiri Kavulak.


AngularJS-Toaster is under MIT license -

Module stats last updated: 2018-01-04 15:00:13

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!