angularjs-toast

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 [email protected]: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;
    }
  }
}