An AngularJS component that handle the disabling of button when clicked synchronous/asynchronously and changing the text of it to progressive form.
- AngularJS > 1.6
- Bootstrap 3 (optional)
npm install --save button-load
- For normal usage in html
<script src="<node_modules path>/button-load/dist/button-load.min.js">
(I recommend using a compiler instead) - For Webpack use
import 'button-load';
- For Gulp/Grunt use
require 'button-load';
- Then just declare the
<button-load></button-load>
like a normal button do.
<button-load ng-click="ctrl.yourFunction()" class="btn btn-default">
Save
</button-load>
- It will automatically disable the button and adjust the text specified on a progressive form. e.g.
Save
becomesSaving ...
- For asynchronous function for the component to know when it will end. You need to return the promise.
function save() {
return $http.get('test').then(function() {
});
}
- If for instance you want your own translation for the loading text. You can use the attribute
loading-txt
which will use your own translation instead.
<button-load ng-click="ctrl.yourFunction()" class="btn btn-default" loading-txt="Your Own Load">
Save
</button-load>
instead of the default it will display the Your Own Load
text.
- Test Script