Growl-style alerts and messages for your angular app.

Angular Core Dependency: ~1.6.0

Module License: MIT

Added by: Sam Deering





Stars: 168

Watchers: 168

Forks: 10

Module Description

Angular Toasty

![Gitter]( Chat.svg)

Angular Toasty is a angularjs module that provides growl-style alerts and messages for your angular app with extensive features.

Latest release requires AngularJS v1.2.20 or higher and angular-animate for the CSS3 transformations.


This module is based on AngularJS-Toaster by Jirikavi.

bower install angular-toasty

Current Version 0.1.8

alt tag

Current Features

  • onClick, onAdd, onRemove event handlers.
  • show / hide close button. (showClose)
  • enable / disable click to close. (clickToClose)
  • success, wait, info, warning & error toast types.
  • adjust timeouts.
  • toast sounds (optional toggle)
  • toast position. (bottom-right as default)
  • toast add to top/bottom of current toasts.

Planned Features

  • Toast shaking via css.
  • Toast sizes.

I've yet to do the documentation, so please see sample app for several usage examples.

Example controller using Toasty:


angular.module('main', ['ngAnimate', 'toasty'])
    .controller('myController', function($scope, toasty, $timeout, $window) {

        $scope.pop = function() {
                title: "Success!",
                msg: 'Click to change me.',
                timeout: 0,
                showClose: false,
                myData: 'Testing 1 2 3', // Strings, integers, objects etc.
                onClick: function(toasty) {
                    toasty.title = 'Well done!';
                    toasty.msg = 'Closing in 5 seconds.';
                    toasty.timeout = 5000;
                onAdd: function(toasty) {
                    console.log( + ' has been added!');
                onRemove: function(toasty) {
                    console.log( + ' has been removed!');

                title: 'Warning!',
                msg: 'Click to close me.',
                showClose: false,
                clickToClose: true,
                timeout: 0,

                title: 'Please Wait',
                msg: 'I\'ll change after 5 seconds.',
                timeout: 0,
                clickToClose: false,
                showClose: false,
                onAdd: function(toasty) {

                    var doSuccess = function() {
                        toasty.title = 'Success';
                        toasty.msg = 'Loading finished!';
                        toasty.showClose = true;

                    $timeout(doSuccess, 5000);

                title: 'Error!',
                msg: 'Click the remove icon to get rid of me.',
                timeout: 0,
                showClose: true,
                clickToClose: false,

                title: 'Info',
                msg: 'I\'ll just stay here forever.',
                timeout: 0,
                showClose: false,
                clickToClose: false,


        // Remove all toasties
        $scope.clear = function() {



<div ng-controller="myController">
        <button class="btn btn-primary" style="margin: 150px 0 0 150px;" ng-click="pop()">Show toasts</button>
        <br /> 
        <button class="btn btn-danger" style="margin: 10px 0 0 150px;" ng-click="clear()">Clear toasts</button>                 

<!-- Toasty controller, add this to your index page / default template --> 
<div ng-controller="toasty-controller">
    <toasty-container toasty-defaults='{"timeout": 3000, "close-button":true}'></toasty-container>        

Module stats last updated: 2018-01-20 16:00:02

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!