Angular Ladda module
npm install angular2-laddanpm install ladda angular2-ladda
html
`
- Import LaddaModule in your app's main module app.module.ts, e.g.:
`typescript
// other imports
// ...
import { LaddaModule } from 'angular2-ladda';
// ...
@NgModule({
imports: [
// other imports
// ...
LaddaModule,
// ...
]
});
`
Ladda defaults can be configured as follows:
`typescript
// 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.:
`html
`
In the component the value of isLoading can be changed to show/hide Ladda's spinner:
`typescript
import { Component } from '@angular/core';
@Component({
template:
})
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
$3
Loading progress can be shown by setting the bound value to a number (between 0 and 1) rather than true.
For example:
`typescript
import { Component } from '@angular/core';
@Component({
template:
})
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);
}
}
``