angular-flash
A simple lightweight flash message module for AngularJS and Bootstrap.
Demo
angular-flash | jsfiddle | codepen
Install
npm
You can also find angular-flash on npm
$ npm install angular-flash-alert
Bower
You can Install angular-flash using the Bower package manager.
$ bower install angular-flash-alert --save
Add the Following code to the <head> of your document.
// 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 ngFlash
dependency to your module
var myApp = angular
Include directive below in your HTML template.
Configure
You can configure angular-flash by two ways:
Add attributes on the <flash-message>
directive.
<!-- 5000ms as the default duration to show flash message.Show the close button (x on the right).Call myCallback with flash dismissed as parameter when flash has been dismissed.-->
Set configuration with flashProvider
.
app;
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.
app;
By giving it in the HTML: use .setTemplatePreset('transclude')
with the template transcluded in the <flash-message>
directive.
app;
{{ flash.text }}
How to use
Inject the Flash
factory in your controller
myApp;
Flash types
- success
- info
- warning
- danger
Methods
These methods are mostly for internal usage but can be used also from outside.
Flash;// Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()
Flashclear;// 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 Flash.create
function.
Flash;
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