No Proscribed Meaning

    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';
      imports: [
    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
          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.


    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 is done via the forRoot method of the promise button module:

    import {Angular2PromiseButtonModule} from 'angular2-promise-buttons';
      imports: [
            // 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(() => {
          }, 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()" 


    Contribution guidelines:


    npm i angular2-promise-buttons

    DownloadsWeekly Downloads






    Unpacked Size

    108 kB

    Total Files


    Last publish


    • johannesjo