Angular provider for toast notifications
JavaScript CSS HTML
Clone or download
Latest commit 744a2dc Dec 9, 2017

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.

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

  1. Include ngToast as a dependency in your application module:
var app = angular.module('myApp', ['ngToast']);
  1. Place toast element into your HTML:
  1. Inject ngToast provider in your controller:
app.controller('myCtrl', function(ngToast) {
  ngToast.create('a toast message...');
// for more info:


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'
  1. Then in your CSS (example using animate.css):
/* Add any vendor prefixes you need */ {
  animation: flipInY 1s;
} {
  animation: flipOutY 1s;

Settings & API

Please find at the project website.


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





  • Add more unit & e2e tests