Angular provider for toast notifications
ngToast is a simple Angular provider for toast notifications.
Download ngToast manually or install it through NPM / Bower:
bower install ngtoast --production
# or
npm install ng-toast --production
Include ngToast resource files along with the built-in ngAnimate & ngSanitize modules and the Bootstrap CSS (only the Alerts component is used as style base, so you don't have to include complete CSS):
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ngToast.min.css">
<script src="angular-animate.min.js"></script>
<script src="angular-sanitize.min.js"></script>
<script src="ngToast.min.js"></script>
Include ngToast as a dependency in your app module:
var app = angular.module('myApp', ['ngToast']);
Place toast (or ng-toast, if you are using a version lower than 1.2.1) element into your HTML:
<body>
<toast></toast>
...
</body>
Inject ngToast provider in your controller:
app.controller($scope, ngToast) {...};
Please check out Github page to see how to use ngToast with animations.
// create a simple toast:
ngToast.create('a toast message...');
// create a toast with settings:
ngToast.create({
className: 'warning',
content: '<a href="#" class="">a message</a>'
});
// or just use "success", "info", "warning" or "danger" shortcut methods:
var myToastMsg = ngToast.warning({
content: '<a href="#" class="">a message</a>'
});
// to clear a toast:
ngToast.dismiss(myToastMsg);
// clear all toasts:
ngToast.dismiss();
| Property | Default | Description |
|---|---|---|
| content | '' | Content of the toast message as string (HTML is supported). (string) |
| className | 'success' | Class name to be added on toast message with 'alert-' prefix. See Bootstrap Alerts for possible options. (string) |
| dismissOnTimeout | true | Allows toast messages to be removed automatically after a specified time. (boolean) |
| timeout | 4000 | Wait time for removal of created toast message. (number) |
| dismissButton | false | Appends specified close button on toast message. (boolean) |
| dismissButtonHtml | '×' | HTML of close button to append. (string) |
| dismissOnClick | true | Allows toasts messages to be removed on mouse click. (boolean) |
| onDismiss | null | A callback that will be triggered whenever a toast message is dismissed. Context of the function will be the message object. (function) |
| compileContent | false | Re-compiles the toast message content within parent (or given) scope. Needs to be used with trusted HTML content. See here for more information. (boolean|object) |
| animation* | '' | Built-in animation type for toast messages: 'slide' or 'fade' (string) |
| additionalClasses* | '' | Additional class name(s) to add toast messages. (string) |
| horizontalPosition* | 'right' | Horizontal position of toast messages: 'right', 'left' or 'center' (string) |
| verticalPosition* | 'top' | Vertical position of toast messages: 'top' or 'bottom' (string) |
| maxNumber* | 0 | Maximum number of toast messages to display. (0 = no limit) (number) |
| combineDuplications* | false | If enabled, toast messages with the same content & type will be merged and the count number will be displayed at the beginning of message. (boolean) |
| newestOnTop* | true | Adds newly created toast messages on top of old ones. (boolean) |