angularjs-toast   

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

Live demo [here][demo]

Getting Started

$3

You can directly clone/download [here][angularjs-toast]

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

or use cdn

Minified:

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

Pretty Printed:

`bash
//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][npm] or [yarn][yarn]

`bash
npm install angularjs-toast --save


or


yarn add angularjs-toast
`

$3

Import the modules required for angularjs-toast. It is necessary to include [ngSanitize][ngsanitize] and [ngAnimate][nganimate] for angularjs-toast to work

`html
<-- styles -->


<-- scripts -->




`

add angularjsToast dependency to the module

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

and in your controller

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

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

then in HTML

`html

`

$3

`js
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. |

$3

`js
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' |

$3

Default fadeIn-fadeOut animation can be overwriten

`scss
.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;
}
}
}
``

[nganimate]: https://docs.angularjs.org/api/ngAnimate
[ngsanitize]: https://docs.angularjs.org/api/ngSanitize
[npm]: https://www.npmjs.com/
[yarn]: https://yarnpkg.com/lang/en/
[github]: https://sibiraj-s.github.io/
[ngx-notifier]: https://github.com/sibiraj-s/ngx-notifier
[angularjs-toast]: https://github.com/sibiraj-s/angularjs-toast
[demo]: https://sibiraj-s.github.io/angularjs-toast/