angular2-ladda
v5.0.0
Published
Angular Ladda module
Downloads
21,510
Readme
Angular Ladda module
This is a module for Angular 2+ that implements Ladda.
Check out Ladda's demo
Installation
Run
npm install ladda angular2-ladda
Add "node_modules/ladda/dist/ladda.min.css" or "node_modules/ladda/dist/ladda-themeless.min.css" to the "styles" array in your angular.json file. If you aren't using the Angular CLI, link to the appropriate CSS file in your document instead. For example:
<link rel="stylesheet" href="node_modules/ladda/dist/ladda.min.css">
- Import
LaddaModule
in your app's main moduleapp.module.ts
, e.g.:
// other imports
// ...
import { LaddaModule } from 'angular2-ladda';
// ...
@NgModule({
imports: [
// other imports
// ...
LaddaModule,
// ...
]
});
Ladda defaults can be configured as follows:
// other imports
// ...
import { LaddaModule } from 'angular2-ladda';
// ...
@NgModule({
imports: [
// other imports
// ...
LaddaModule.forRoot({
style: "contract",
spinnerSize: 40,
spinnerColor: "red",
spinnerLines: 12
}),
// ...
]
});
Usage
Add [ladda]="isLoading"
to a button tag in your template, e.g.:
<button [ladda]="isLoading">Save</button>
In the component the value of isLoading
can be changed to show/hide Ladda's spinner:
import { Component } from '@angular/core';
@Component({
template: `
<h1>Home Component</h1>
<button (click)="toggleLoading()">Toggle Ladda in button below</button>
<hr>
<button [ladda]="isLoading">Save</button>
`
})
export class HomeComponent {
// trigger-variable for Ladda
isLoading: boolean = false;
toggleLoading() {
this.isLoading = !this.isLoading;
}
}
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:
import { Component } from '@angular/core';
@Component({
template: `
<h1>Home Component</h1>
<button [ladda]="progress" (click)="startLoading()">Click to show progress</button>
`
})
export class HomeComponent {
progress: boolean | number = false;
startLoading() {
this.progress = 0; // starts spinner
setTimeout(() => {
this.progress = 0.5; // sets progress bar to 50%
setTimeout(() => {
this.progress = 1; // sets progress bar to 100%
setTimeout(() => {
this.progress = false; // stops spinner
}, 200);
}, 500);
}, 400);
}
}
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.