Angular Toasty
Angular Toasty is a simple standalone AngularJS module with extensive features that provides growl-style alerts and messages for your app.
Demo
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:
bower install 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;
Add the toasty directive:
<toasty></toasty> </body></html>
Inject and use the toasty service in your controllers:
angular
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
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;
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:
;
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
Toast Types
There's multiple types of toast to use:
; // Defaulttoasty;toasty;toasty;toasty;toasty;
To create a "quick toast", just pass a string or integer to the function instead:
;toasty;
Event Handlers & Broadcasting
You can easily hook into individual toast item events by calling a functions:
;
Toasty also broadcasts on events which can be hooked into:
// When a new toast is added$rootScope;// When a toast is clicked$rootScope;// When a toast is cleared/removed$rootScope;
Contributing
Please see the contributing guidelines.