angularjs-toast demo

angularjs-toast is a simple service for creating toast notification for AngularJS pages

Sample alerts. Click on any following buttons to see toasts in action

Here it is configured to display inside container using `container` propery



Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.

angularjs-toast npm version jsdelivr

Installation

Installation can be done via package managers such as npm, yarn and bower


  npm install angularjs-toast --save
  # or
  yarn add angularjs-toast

Usage

import the modules required for angularjs-toast. It is necessary to include ngSanitize and ngAnimate for angularjs-toast to work 


  <link rel="stylesheet" href="../angularjs-toast.min.css">

  <script src="angular/angular.min.js"></script>
  <script src="angular-sanitize/angular-sanitize.min.js"></script>
  <script src="angular-animate/angular-animate.min.js"></script>
  <script src="angularjs-toast.min.js"></script>

add the angularjsToast dependency to the module 


  const app = angular.module('myApp', ['angularjsToast'])

in your controller


  const toastController = toast => {
    toast.create('Hello World!');
  };

  toastController.$inject = ['toast'];
  app.controller('toastController', toastController);

in your html


  <toast></toast>