Angular Toasty is a simple standalone AngularJS module with extensive features that provides growl-style alerts and messages for your app.
- 3 Themes (Default, Material Design & Bootstrap 3)
- Global/Individual timeouts
- Shaking Toasts
- Toaster sound
- onAdd, onRemove & onClick event handlers
- Event broadcasting
- Positioning
- HTML allowed
npm install @xenialab/angular-toasty<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>angular.module('app', ['angular-toasty']); <toasty></toasty>
</body>
</html>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.
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
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()!
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'
});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
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.
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!');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) });Please see the contributing guidelines.