Angular provider for toast notifications


2.0.04 years ago4 years agoMinified + gzip package size for @codemotion/angular-toast in KB


ngToast Code Climate Build Status

ngToast is a simple Angular provider for toast notifications.



  1. Install via Bower or NPM:

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

    or manually download.

  2. Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS): ```html

 *Note: only the [Alerts](http://getbootstrap.com/components/#alerts) component is used as style base, so you don't have to include complete CSS*

3. Include ngToast as a dependency in your application module:
var app = angular.module('myApp', ['ngToast']);
  1. Place toast element into your HTML:

  2. 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


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>


  1. Include the ngToast animation stylesheet:
<link rel="stylesheet" href="bower/ngtoast/dist/ngToast-animations.min.css">
  1. Set the animation option.
    app.config(['ngToastProvider', function(ngToastProvider) {
     animation: 'slide' // or 'fade'
    Built-in ngToast animations include slide & fade.


See the plunker using animate.css.

  1. 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) {
     additionalClasses: 'my-animation'
  2. Then in your CSS (example using animate.css): ```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](http://tameraydin.github.io/ngToast/#api).

## Development

* Clone the repo or [download](https://github.com/tameraydin/ngToast/archive/master.zip)
* Install dependencies: ``npm install && bower install``
* Run ``grunt watch``, play on **/src**
* Build: ``grunt``

## License

MIT [http://tameraydin.mit-license.org/](http://tameraydin.mit-license.org/)

## Maintainers

- [Tamer Aydin](http://tamerayd.in)
- [Levi Thomason](http://www.levithomason.com)

- Add more unit & e2e tests

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.