This is a module for Angular 2+ that implements Ladda.
-
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
LaddaModulein 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
}),
// ...
]
});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
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);
}
}Please leave your feedback if you notice any issues or have a feature request.
The repository code is open-source software licensed under the MIT license.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent