https://github.com/johannesjo/angular2-promise-buttons
Chilled loading buttons for angular2
https://github.com/johannesjo/angular2-promise-buttons
angular2 angular2-component button promise
Last synced: 3 months ago
JSON representation
Chilled loading buttons for angular2
- Host: GitHub
- URL: https://github.com/johannesjo/angular2-promise-buttons
- Owner: johannesjo
- License: mit
- Created: 2017-04-07T15:24:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T14:27:56.000Z (over 1 year ago)
- Last Synced: 2024-10-29T16:41:49.108Z (7 months ago)
- Topics: angular2, angular2-component, button, promise
- Language: TypeScript
- Homepage: https://johannesjo.github.io/angular2-promise-buttons/#demo
- Size: 8.05 MB
- Stars: 86
- Watchers: 5
- Forks: 28
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo. (Table of contents / Third Party Components)
README
*angular2-promise-buttons* is a simple module that let's you add a loading indicator to a button of your choice. Check out the [demo](http://johannesjo.github.io/angular2-promise-buttons/#demo)!
[Bug-reports or feature request](https://github.com/johannesjo/angular2-promise-buttons/issues) as well as any other kind of **feedback is highly welcome!**
## Getting started
Install it via npm:
```
npm install angular2-promise-buttons -S
```
And add it as a dependency to your main module
```typescript
import {Angular2PromiseButtonModule} from 'angular2-promise-buttons';
@NgModule({
imports: [
Angular2PromiseButtonModule.forRoot(),
],
})
export class MainAppModule {
}
```
Using the buttons is easy. Just pass a promise to the directive:
```html
Click me to spin!
```
```typescript
export class SomeComponent {
// some example async action, but this works with any promise
someAction(){
this.promiseSetBySomeAction = new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
}
}
```
## Styling the button
To give you maximum flexibility there are no base styles coming with the directive, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css to your global stylesheet.
**Ressources:**
* http://cssload.net/
* http://projects.lukehaas.me/css-loaders/
* http://tobiasahlin.com/spinkit/
There are selectors you can use to style. There is the `.is-loading` class on the button, which is set, when the promise is pending and there is the `` element inside the button.
## Configuration
Configuration is done via the forRoot method of the promise button module:
```typescript
import {Angular2PromiseButtonModule} from 'angular2-promise-buttons';
@NgModule({
imports: [
Angular2PromiseButtonModule
.forRoot({
// your custom config goes here
spinnerTpl: '',
// disable buttons when promise is pending
disableBtn: true,
// the class used to indicate a pending promise
btnLoadingClass: 'is-loading',
// only disable and show is-loading class for clicked button,
// even when they share the same promise
handleCurrentBtnOnly: false,
}),
],
})
export class MainAppModule {
}
```
## Using observables
When you're using the module with observables make sure to pass a subscription to the directive rather than an observable directly.
```typescript
const FAKE_FACTORY = {
initObservable: (): Observable => {
return new Observable(observer => {
setTimeout(() => {
observer.complete();
}, 4000);
});
}
};
// DO:
const observable = FAKE_FACTORY.initObservable();
this.passedToDirective = observable.subscribe(
// ...
);
// DON'T DO:
const observable = FAKE_FACTORY.initObservable();
this.passedToDirective = observable;
```
## Using booleans
Is now also possible.
```html
Click!
```
## Contributing
Contribution guidelines: [CONTRIBUTING.md](https://github.com/johannesjo/angular2-promise-buttons/blob/master/CONTRIBUTING.md)