angular2-promise-buttons

To help you get started, we've collected the most common ways that angular2-promise-buttons is being used within popular public projects.

SapphireDb / SapphireDb / DemoClient / src / app / app.module.ts View on Github

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    RealtimeDatabaseModule.config({
      serverBaseUrl: `${location.hostname}:${location.port}`,
      loginRedirect: 'account/login',
      unauthorizedRedirect: 'account/unauthorized'
      // secret: 'test123'
    }),
    AppRoutingModule,
    Angular2PromiseButtonModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

View more ways to use angular2-promise-buttons

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!

Bug-reports or feature request 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

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:

<button>Click me to spin!</button>

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:

• https://cssload.net/
• https://projects.lukehaas.me/css-loaders/
• https://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 <span class="btn-spinner"></span> element inside the button.

Configuration

Configuration is done via the forRoot method of the promise button module:

import {Angular2PromiseButtonModule} from 'angular2-promise-buttons';

@NgModule({
  imports: [
    Angular2PromiseButtonModule
      .forRoot({
        // your custom config goes here
        spinnerTpl: '<span class="btn-spinner"></span>',
        // 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.

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.

<button>Click!</button>

Contributing

Contribution guidelines: CONTRIBUTING.md