View on GitHub


Flash message for AngularJS and Bootstrap.

Download this project as a .zip file Download this project as a tar.gz file


Flash message for AngularJS and Bootstrap.

Another Demo

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=""></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.



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.config((FlashProvider) => {

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) => {
{{ flash.text }}
`); });

By giving it in the HTML: use .setTemplatePreset('transclude') with the template transcluded in the <flash-message> directive.

app.config((FlashProvider) => {
    <div class="my-flash">{{ flash.text }}</div>

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


These methods are mostly for internal usage but can be used also from outside.

// Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()
// 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'});


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.


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 {...}, {...}, {...}

Edit on Codepen

See the Pen Flash message for AngularJS by Sachin choolur (@sachinchoolur) on CodePen.

Like angular-flash? You may also like