Demo Flash message for AngularJS and Bootstrap. Success Info Warning Danger

Another Demo Delete {{list.content}} add

Install angular-flash Add the following code to the <head> of your document. <link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" /> // If you are using bootstrap v3 no need to include angular-flash.min.css <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="dist/angular-flash.min.js"></script> // Do not include both angular-flash.js and angular-flash.min.js Add ngFlash dependency to your module var myApp = angular.module("app", ["ngFlash"]); Include flash-message directive in your HTML. <flash-message></flash-message>

Configure You can configure angular-flash by two ways: Add attributes on the <flash-message> directive. <flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash)" ></flash-message> // 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.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. app.config((FlashProvider) => { FlashProvider.setTemplate(` {{ flash.text }} `); }); By giving it in the HTML: use .setTemplatePreset('transclude') with the template transcluded in the <flash-message> directive. app.config((FlashProvider) => { FlashProvider.setTemplatePreset('transclude'); }); <flash-message> <div class="my-flash">{{ flash.text }}</div> </flash-message>

How to use Inject the Flash factory in your controller myApp.controller('demoCtrl', ['Flash', function(Flash) { $scope.successAlert = function () { var message = '<strong> Well done!</strong> 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 alert types success

info

warning

danger

Methods These methods are mostly for internal usage but can be used also from outside. 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() Flash.clear(); // Dismisses all flashes shown.

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-message name="flash-fixed"></flash-message> Flash.create('success', 'Hooray!', 0, {container: 'flash-fixed'});

Bootstrap Angular-flash is fully compatible with Twitter Bootstrap. It uses standard Bootstrap classes. If Bootstrap CSS is already included in your document there is no need to include angular-flash.css in your document.

ngAnimate If you want to use animations, include ngAnimate module. You can then use regular Angular animation technique for applying your own transitions. var myApp = angular.module("app", ["ngFlash", "ngAnimate"]); .alert {...} .alert.ng-enter, .alert.ng-enter.ng-enter-active {...} .alert.ng-leave, .alert.ng-leave.ng-leave-active {...}