Angular Toasty

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

Current Features

• 3 Themes (Default, Material Design & Bootstrap 3)
• Global/Individual timeouts
• Shaking Toasts
• Toaster sound
• onAdd, onRemove & onClick event handlers
• Event broadcasting
• Positioning
• HTML allowed

Installation

Install from Bower:

npm install @xenialab/angular-toasty

Add dependancies to HTML (AngularJS required)

<link href="./bower_components/angular-toasty/dist/angular-toasty.min.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="./bower_components/angular-toasty/dist/angular-toasty.min.js"></script>

Add the toasty module to your Angular app:

angular.module('app', ['angular-toasty']);

Add the toasty directive:

		<toasty></toasty>
	</body>
</html>

Inject and use the toasty service in your controllers:

angular.module('app').controller('UserCtrl', ['$scope', 'toasty', function($scope, toasty) {
	$scope.addUser = function(user) {
		// ...
		// Add user
		// ...
		toasty.success({
			title: 'User added!',
			msg: user.firstName + ' has been added!'
		});
}]);

Each toast must have at least a title or message.

Configuration

The default toasty config:

* limit: 5, // {int} Maximum number of toasties to show at once
showClose: true, // {bool} Whether to show the 'X' icon to close the toasty
clickToClose: false, // {bool} Whether clicking the toasty closes it
position: 'bottom-right', // {string:bottom-right,bottom-left,top-right,top-left,top-center,bottom-center} The window position where the toast pops up
timeout: 5000, // {int} How long (in miliseconds) the toasty shows before it's removed. Set to false to disable.
sound: true, // {bool} Whether to play a sound when a toast is added
html: false, // {bool} Whether HTML is allowed in toasts
shake: false, // {bool} Whether to shake the toasts
theme: 'default' // {string} What theme to use; default, material or bootstrap
overridePosition: false // {bool} Whether to allow position overriding outside the configuration phase

Config items marked with * cannot be overridden at an individual level

Global Overrides

To globally override the above config, simply inject the toastyProvider into your app at config:

angular.module('app').config(['toastyConfigProvider', function(toastyConfigProvider) {
	toastyConfigProvider.setConfig({
		sound: false,
		shake: true
	});
}]);

You can also get the global config at any time by calling toasty.getGlobalConfig()!

Individual Overrides

To override the global config for individual toasts, simply pass them into the creation object:

toasty({
	title: 'Ping!',
	msg: '<a href="http://google.com">Take me to Google!</a>',
	showClose: false,
	clickToClose: true,
	timeout: 10000,
	sound: false,
	html: true,
	shake: true,
	theme: 'bootstrap'
});

Features

Clearing/Removing

You can easily clear/remove a toast from the view by calling the clear method. To remove all at once, just call the method with no ID.

toasty.clear(); // Clear all 
toasty.clear(id); // Remove a single toast by it's ID

Update configuration

You can update the global configuration outside the initial configuration phase by calling the updateConfig method and passing a configuration object containing the properties you wish to override.

Toast Types

There's multiple types of toast to use:

toasty(); // Default
toasty.info();
toasty.success();
toasty.wait();
toasty.error();
toasty.warning();

To create a "quick toast", just pass a string or integer to the function instead:

toasty('Quick Toast!');
toasty.success('Quick Success Toast!');

Event Handlers & Broadcasting

You can easily hook into individual toast item events by calling a functions:

toasty({
	title: 'New Toast!',
	onAdd: function() {
		console.log('Toasty ' + this.id + ' has been added!', this);
	},
	onRemove: function() {
		console.log('Toasty ' + this.id + ' has been removed!', this);
	},
	onClick: function() {
		console.log('Toasty ' + this.id + ' has been clicked!', this);
	}
});

Toasty also broadcasts on events which can be hooked into:

// When a new toast is added
$rootScope.$on('toasty-added', function(event, toast) { console.log(toast) });
// When a toast is clicked
$rootScope.$on('toasty-clicked', function(event, toast) { console.log(toast) });
// When a toast is cleared/removed
$rootScope.$on('toasty-cleared', function(event, toast) { console.log(toast) });

Contributing

Please see the contributing guidelines.