Angular Ladda module
This is a module for Angular 2+ that implements Ladda.
Installation
-
run
npm install angular2-ladda
-
link Ladda's stylesheets to your document - you can find it in /node_modules/ladda/, e.g. add this in your html-document:
- import
LaddaModule
in your app's main moduleapp.module.ts
, e.g.:
// other imports// ...;// ...
Ladda defaults can be configured as follows:
// other imports// ...;// ...
Usage
Add [ladda]="isLoading"
to a button tag in template, e.g.:
Save
In the component the value of isLoading
can be toggled to show/hide Ladda's spinner:
;
Buttons accept the following attributes:
- data-style: one of the button styles, full list in demo
- data-spinner-size: pixel dimensions of spinner, defaults to dynamic size based on the button height
- data-spinner-color: hex code or any named CSS color
- data-spinner-lines: the number of lines for the spinner, defaults to 12
Progress
Loading progress can be shown by setting the bound value to a number (between 0 and 1) rather than true
.
For example:
;
Feedback
Please leave your feedback if you notice any issues or have a feature request.
License
The repository code is open-source software licensed under the MIT license.