angularjs-toast

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 [e-mail]: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;
    }
  }
}

Changelog

v4.0.0 (2020-01-02)

Breaking Changes

• rename $toastProvider to toastProvider (137be4f)

Add toast directive to ur HTML

<toast></toast>

Before

// before
toast('Hello World!');
// now
toast.create('Hello World!');