Flash message for AngularJS and Bootstrap
npm install angular-flash-alert#### npm
You can also find angular-flash on npm
``sh`
$ npm install angular-flash-alert
#### Bower
You can Install angular-flash using the Bower package manager.
`sh`
$ bower install angular-flash-alert --save
Add the Following code to the <head> of your document.
`html`
// If you are using bootstrap v3 no need to include angular-flash.css
// Do not include both angular-flash.js and angular-flash.min.js
Add dependency to your module`javascript`
var myApp = angular.module("app", ["ngFlash"])
Include directive below in your HTML template.html`
Add attributes on the directive.`html
show-close="true"
on-dismiss="myCallback(flash);"
>
`
Set configuration with flashProvider.`javascript`
app.config((FlashProvider) => {
FlashProvider.setTimeout(5000);
FlashProvider.setShowClose(true);
FlashProvider.setOnDismiss(myCallback);
});
#### Use a custom template
By default, angular-flash use the Bootstrap flash standard template, but you can set your own template.
By giving it in the Js: use .setTemplate(...) with the template in parameter.`javascript
app.config((FlashProvider) => {
FlashProvider.setTemplate(
);
});
`By giving it in the HTML: use
with the template transcluded in the directive.
`javascript
app.config((FlashProvider) => {
FlashProvider.setTemplatePreset('transclude');
});
`
html
{{ flash.text }}
`How to use
Inject the factory in your controller
`javascript
myApp.controller('demoCtrl', ['Flash', function(Flash) {
$scope.successAlert = function () {
var message = 'Well done! You successfully read this important alert message.';
var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true);
// First argument (string) is the type of the flash alert.
// Second argument (string) is the message displays in the flash alert (HTML is ok).
// Third argument (number, optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner).
// Fourth argument (object, optional) is the custom class and id to be added for the flash message created.
// Fifth argument (boolean, optional) is the visibility of close button for this flash.
// Returns the unique id of flash message that can be used to call Flash.dismiss(id); to dismiss the flash message.
}
}]);
`
#### Flash types ####
+ success
+ info
+ warning
+ danger#### Methods
These methods are mostly for internal usage but can be used also from outside.
javascript
Flash.dismiss(1);
// Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()
` javascript
Flash.clear();
// Dismisses all flashes shown.
`#### Animating
You can animate the flash messages via traditional Angular way by including _ngAnimate_ as a dependency of your application and then defining the CSS transitions for different classes (_ng-enter_, _ng-move_, _ng-leave_) provided by Angular.
Example:
.alert.ng-leave {
opacity: 1;
transition: opacity 1.5s ease-out;
}
.alert.ng-leave-active {
opacity: 0;
}
#### Multiple flash containers
You can send flashes to different containers by naming them and specifying their name in the config you pass to the
function.`html
`
js
Flash.create('success', 'Hooray!', 0, {container: 'flash-fixed'});
`#### Guidelines for contributors
#### Running tests
You'll need relatively new versions of Firefox and Chrome installed on your local system to run the tests.
Once you do, run:
npm install
npm run test
#### Contributors
* Sachin Choluur (Original author)
* Roope Hakulinen (Version 2)
* Nicolas Coden
#### License
MIT © Sachin Choluur