Angular-flash

Demo

Flash message for angularjs

Another Demo

{{list.content}} Delete

add

How to use angular-flash?

Add the Following code to the of your document.

<link type="text/css" rel="stylesheet" href="css/angular-flash.min.css" />
// If you are using bootstrap v3 no need to include angular-flash.css
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="angular-flash.min.js"></script>
// Do not include both angular-flash.js and angular-flash.min.js

Add flash dependency to your module

var myApp = angular.module("app", ["flash"]);

Include flash-message="5000" directive in your html template.

<div flash-message="5000" ></div> 
// 5000 milli-secs is the display duration.
// Flash alert will be automatically dismissed after 5000 milli-secs.

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.';
    Flash.create('success', message, 'custom-class');
    // First argument (success) is the type of the flash alert
    // Second argument (message) is the message displays in the flash alert
    // You can inclide html as message (not just text)
    // Third argument (custom-class) is the custom class for the perticular flash alert
  }
}]);

Flash alert types

success
info
warning
danger

Methods

Flash.pause()
// Pause flash auto dismiss.
Flash.dismiss()
// Dismiss the flash

Bootstrap

Angular-flash is fully compatible with twitter bootstrap. It uses standard bootstrap classes. If bootstrap css is already included in your document then no need to include angular-flash.css in your document

ngAnimate

If you want animations include ngAnimate module. you can use inbuilt classes .alertIn and .alertOut for applying css

var myApp = angular.module("app", ["flash", "ngAnimate"]);

.alertIn, .alertOut {...}
.alertIn.ng-hide-remove, .alertOut.ng-hide-add.ng-hide-add-active {...}
.alertOut.ng-hide-add, .alertIn.ng-hide-remove.ng-hide-remove-active {...}

Edit on Codepen

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

Like angular-flash? you may also like

Follow @sachinchoolur