Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moff/angular2-ladda
Angular 2 Ladda module
https://github.com/moff/angular2-ladda
Last synced: 9 days ago
JSON representation
Angular 2 Ladda module
- Host: GitHub
- URL: https://github.com/moff/angular2-ladda
- Owner: moff
- License: mit
- Created: 2016-08-24T06:09:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T10:37:34.000Z (over 1 year ago)
- Last Synced: 2024-10-22T23:08:56.983Z (17 days ago)
- Language: TypeScript
- Size: 1.37 MB
- Stars: 97
- Watchers: 5
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular-components - angular2-ladda - Angular 2 Ladda module. (Uncategorized / Uncategorized)
- awesome-angular - angular2-ladda - Angular 2 Ladda module. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-ladda - Angular 2 Ladda module. (Uncategorized / Uncategorized)
- awesome-angular-components - moff/angular2-ladda - Angular 2 Ladda module (UI Components / Loader)
README
# Angular Ladda module
[](https://www.npmjs.org/package/angular2-ladda)
[](https://www.npmjs.org/package/angular2-ladda)
[](http://opensource.org/licenses/MIT)
This is a module for Angular 2+ that implements [Ladda](https://github.com/hakimel/Ladda).
## 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:
```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
Save
```
In the component the value of `isLoading` can be changed to show/hide Ladda's spinner:
```typescript
import { Component } from '@angular/core';
@Component({
template: `
Home Component
Toggle Ladda in button below
Save
`
})
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](http://lab.hakim.se/ladda/)
- 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:
```typescript
import { Component } from '@angular/core';
@Component({
template: `
Home Component
Click to show progress
`
})
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](https://github.com/moff/angular2-ladda/issues) if you notice any issues or have a feature request.
## License
The repository code is open-source software licensed under the [MIT license](http://opensource.org/licenses/MIT).