angularjs-toast is a simple service for creating toast notification for AngularJS pages
Live demo here
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
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>
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. |
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' |
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;
}
}
}