angularjs-toast

4.0.1 • Public • Published

angularjs-toast NPM Version Tests Jsdelivr

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

Live demo here

Getting Started

Installation

You can directly clone/download here

git clone git@github.com:sibiraj-s/angularjs-toast.git

or use cdn

Minified:

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.js
//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.css

Pretty Printed:

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.js
//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.css

or

Install via Package managers such as npm or yarn

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

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

<-- scripts -->
<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 angularjsToast dependency to the module

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

and in your controller

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

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

then in HTML

<toast></toast>

Options

toast.create({
  timeout: 5 * 1000,
  message: 'Hi there!',
  className: 'alert-success',
  dismissible: true
});
Property Type Default Description
className string alert-success accepted values are alert-(success/danger/primary/info)
timeout number 5000 timeout for each toast messages to disappear
message html-string or string Hi there! can be HTML or plain string
dismissible boolean true show / hide the close icon.

Configure globally

const config = toastProvider => {
  toastProvider.configure({
    maxToast: 4,
    timeout: 5 * 1000,
    containerClass: 'toast-wrapper',
    defaultToastClass: 'alert-success',
    dismissible: true,
    insertFromTop: true,
    position: 'right'
  });
};

config.$inject = ['toastProvider'];
app.config(config);
Property Type Default Description
maxToast number 7 maximum number of toast messages to show. if max reached the element inserted first will be removed
timeout number 5000 timeout for each toast messages to disappear
containerClass string " adds class to the container for more flexibility in styling
defaultToastClass string " adds class to the container for more flexibility in styling
dismissible boolean true show / hide the close icon.
insertFromTop boolean false setting true will insert new messages on top else inserts at bottom
position string right position of the element can be 'left', 'center' and 'right'

Animations

Default fadeIn-fadeOut animation can be overwriten

.angularjs-toast {
  &.ng-enter {
    opacity: 0;
    transition: 0.5s ease-in;

    &.ng-enter-active {
      opacity: 1;
    }
  }

  &.ng-leave {
    opacity: 1;
    transition: 0.2s ease-in;

    &.ng-leave-active {
      opacity: 0;
    }
  }
}

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i angularjs-toast

      Weekly Downloads

      372

      Version

      4.0.1

      License

      MIT

      Unpacked Size

      45.1 kB

      Total Files

      11

      Last publish

      Collaborators

      • sibiraj-s