Name: ngToast
Owner: Ansible
Description: Angular provider for toast notifications
Forked from: leigh-johnson/ngToast
Created: 2016-12-05 15:46:51.0
Updated: 2017-12-19 13:03:21.0
Pushed: 2017-11-27 15:52:29.0
Homepage: http://tameraydin.github.io/ngToast/
Size: 1235
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
ngToast is a simple Angular provider for toast notifications.
r install ngtoast --production
install ng-toast --production
or manually download.
Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS):
k rel="stylesheet" href="bower/bootstrap/dist/css/bootstrap.min.css">
k rel="stylesheet" href="bower/ngtoast/dist/ngToast.min.css">
ipt src="bower/angular-sanitize/angular-sanitize.min.js"></script>
ipt src="bower/ngtoast/dist/ngToast.min.js"></script>
Note: only the Alerts component is used as style base, so you don't have to include complete CSS
Include ngToast as a dependency in your application module:
app = angular.module('myApp', ['ngToast']);
Place toast element into your HTML:
y>
st></toast>
dy>
Inject ngToast provider in your controller:
controller('myCtrl', function(ngToast) {
ast.create('a toast message...');
or more info: http://tameraydin.github.io/ngToast/#api
ngToast comes with optional animations. In order to enable animations in ngToast, you need to include ngAnimate module into your app:
ipt src="bower/angular-animate/angular-animate.min.js"></script>
Built-in
Include the ngToast animation stylesheet:
k rel="stylesheet" href="bower/ngtoast/dist/ngToast-animations.min.css">
Set the animation option.
config(['ngToastProvider', function(ngToastProvider) {
astProvider.configure({
imation: 'slide' // or 'fade'
Built-in ngToast animations include slide & fade.
Custom
See the plunker using animate.css.
Using the additionalClasses option and ngAnimate you can easily add your own animations or wire up 3rd party css animations.
config(['ngToastProvider', function(ngToastProvider) {
astProvider.configure({
ditionalClasses: 'my-animation'
Then in your CSS (example using animate.css):
dd any vendor prefixes you need */
animation.ng-enter {
ation: flipInY 1s;
animation.ng-leave {
ation: flipOutY 1s;
Please find at the project website.
npm install && bower installgrunt watch, play on /srcgruntMIT http://tameraydin.mit-license.org/