ngToast

ngToast is a simple Angular provider for toast notifications.

Usage

Install via Bower or NPM:

bower install ngtoast --production
# or
npm install ng-toast --production

or manually download.

Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS):

<link rel="stylesheet" href="bower/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower/ngtoast/dist/ngToast.min.css">

<script src="bower/angular-sanitize/angular-sanitize.min.js"></script>
<script 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:

var app = angular.module('myApp', ['ngToast']);

Place toast element into your HTML:

<body>
  <toast></toast>
  ...
</body>

Inject ngToast provider in your controller:

app.controller('myCtrl', function(ngToast) {
  ngToast.create('a toast message...');
});
// for more info: http://tameraydin.github.io/ngToast/#api

Animations

ngToast comes with optional animations. In order to enable animations in ngToast, you need to include ngAnimate module into your app:

<script src="bower/angular-animate/angular-animate.min.js"></script>

Built-in

Include the ngToast animation stylesheet:

<link rel="stylesheet" href="bower/ngtoast/dist/ngToast-animations.min.css">

Set the animation option.

app.config(['ngToastProvider', function(ngToastProvider) {
  ngToastProvider.configure({
    animation: '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.

app.config(['ngToastProvider', function(ngToastProvider) {
  ngToastProvider.configure({
    additionalClasses: 'my-animation'
  });
}]);

Then in your CSS (example using animate.css):

/* Add any vendor prefixes you need */
.my-animation.ng-enter {
  animation: flipInY 1s;
}

.my-animation.ng-leave {
  animation: flipOutY 1s;
}

Settings & API

Please find at the project website.

Development

Clone the repo or download
Install dependencies: npm install && bower install
Run grunt watch, play on /src
Build: grunt

License

MIT http://tameraydin.mit-license.org/

Maintainers

TODO

Add more unit & e2e tests

tameraydin/ngToast

tameraydin

Reviews

Repository Details