angular2-promise-buttons
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.3 • Public • Published

    npm version Build Status Coverage Status MIT license

    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)="someAction()" 
       [promiseBtn]="promiseSetBySomeAction">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:

    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<number> => {
        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)="someAction()" 
       [promiseBtn]="isShowBoolean">Click!</button>

    Contributing

    Contribution guidelines: CONTRIBUTING.md

    Install

    npm i angular2-promise-buttons

    DownloadsWeekly Downloads

    1,591

    Version

    5.0.3

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    24

    Last publish

    Collaborators

    • johannesjo