Home

Awesome

AngularJS-Toaster

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. angular-sanitize is required if using the html bodyOutputType.

Build Status Coverage Status

Current Version 3.0.0

Angular Compatibility

AngularJS-Toaster requires AngularJS v1.2.6 or higher and specifically targets AngularJS, not Angular 2-7, although it could be used via ngUpgrade.
If you are looking for the Angular 2-7 port of AngularJS-Toaster, it is located here.

Demo

Getting started

Optionally: to install with bower, use:

bower install --save angularjs-toaster

or with npm :

npm install --save angularjs-toaster
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/3.0.0/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/3.0.0/toaster.min.js"></script>
<toaster-container></toaster-container>
// Display an info toast with no title
angular.module('main', ['toaster', 'ngAnimate'])
	.controller('myController', function($scope, toaster) {
	    $scope.pop = function(){
	        toaster.pop('info', "title", "text");
	    };
	});
<div ng-controller="myController">
    <button ng-click="pop()">Show a Toaster</button>
</div>

Timeout

By default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 milliseconds.

If the timeout is set to 0, the toast will be considered "sticky" and will not automatically dismiss.

The timeout can be configured at three different levels:

<toaster-container toaster-options="{'time-out': 1000}"></toaster-container>
<toaster-container toaster-options="
    {'time-out':{ 'toast-warning': 10, 'toast-error': 0 } }">
</toaster-container>

If a type is not defined and specified, a timeout will not be applied, making the toast "sticky".

toaster.pop({
                type: 'error',
                title: 'Title text',
                body: 'Body text',
                timeout: 3000
            });

Close Button

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

<toaster-container toaster-options="{'close-button': true}"></toaster-container>
<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.

toaster.pop({
                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.

Close Html

The close button html can be overridden either globally or per toast call.

Body Output Type

The rendering of the body content is configurable at both the Global level, which applies to all toasts, and the individual toast level when passed as an argument to the toast.

There are five types of body renderings: 'html', 'trustedHtml', 'template', 'templateWithData', 'directive'.

All five options can be configured either globally for all toasts or individually per toast.pop() call. If the body-output-type option is configured on the toast, it will take precedence over the global configuration for that toast instance.

On Show Callback

An onShow callback function can be attached to each toast instance, with the toast passed as a parameter when invoked. The callback will be invoked upon toast add.

toaster.pop({
            title: 'A toast',
		    body: 'with an onShow callback',
			onShowCallback: function (toast) { 
			    toaster.pop({
			        title: 'A toast',
				    body: 'invoked as an onShow callback'
				});
			}
});

On Hide Callback

An onHide callback function can be attached to each toast instance, with the toast passed as a parameter when invoked. The callback will be invoked upon toast removal. This can be used to chain toast calls.

toaster.pop({
            title: 'A toast',
		    body: 'with an onHide callback',
			onHideCallback: function (toast) { 
			    toaster.pop({
			        title: 'A toast',
				    body: 'invoked as an onHide callback'
				});
			}
});

Multiple Toaster Containers

If desired, you can include multiple <toaster-container></toaster-container> elements in your DOM. The library will register an event handler for every instance of the container that it identifies. By default, when there are multiple registered containers, each container will receive a toast notification and display it when a toast is popped.

To target a specific container, you need to register that container with a unique toaster-id.

<toaster-container toaster-options="{'toaster-id': 1, 
    'animation-class': 'toast-top-left'}"></toaster-container>
<toaster-container toaster-options="{'toaster-id': 2}"></toaster-container>

This gives you the ability to specifically target a unique container rather than broadcasting new toast events to any containers that are currently registered.

vm.popContainerOne = function () {
    toaster.pop({ type: 'info', body: 'One', toasterId: 1 });
}
      
vm.popContainerTwo = function () {
    toaster.pop({ type: 'info', body: 'Two', toasterId: 2 });
}

This plnkr demonstrates this behavior and it is documented in these tests.

Limit

Limit is defaulted to 0, meaning that there is no maximum number of toasts that are defined before the toast container begins removing toasts when a new toast is added.

To change this behavior, pass a "limit" option to the toast-container configuration:

<toaster-container toaster-options="{'limit':5}"></toaster-container>

Dismiss on tap

By default, the tap-to-dismiss option is set to true, meaning that if a toast is clicked anywhere on the toast body, the toast will be dismissed. This behavior can be overriden in the toast-container configuration so that if set to false, the toast will only be dismissed if the close button is defined and clicked:

<toaster-container toaster-options="{'tap-to-dismiss':false}"></toaster-container>

This configuration can also be overriden at the toast level via the tapToDismiss parameter:

toaster.pop({ type: 'info', body: 'One', tapToDismiss: true });

The toast configuration will always take precedence over the toaster-container configuration.

Newest Toasts on Top

The newest-on-top option is defaulted to true, adding new toasts on top of other existing toasts. If changed to false via the toaster-container configuration, toasts will be added to the bottom of other existing toasts.

<toaster-container toaster-options="{'newest-on-top':false}"></toaster-container>

Other Options

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

Animations

Unlike toastr, this library relies on ngAnimate and CSS3 transformations for optional animations. To include and use animations, add a reference to angular-animate.min.js (as described in Getting started - Link scripts) and add ngAnimate as a dependency alongside toaster.

// Inject ngAnimate to enable animations
angular.module('main', ['toaster', 'ngAnimate']);

If you do not want to use animations, you can safely remove the angular-animate.min.js reference as well as the injection of ngAnimate. Toasts will be displayed without animations.

Common Issues

Authors

Jiri Kavulak, Stabzs

Credits

Inspired by http://codeseven.github.io/toastr/demo.html.

Copyright

Copyright © 2013-2019 Jiri Kavulak, Stabzs.

License

AngularJS-Toaster is under MIT license - http://www.opensource.org/licenses/mit-license.php