ngx-promise-buttons

Add a loading spinner to Angular buttons from a promise, RxJS subscription, or boolean. Standalone directive for modern Angular (tested through Angular 22).

Live demo · npm · Changelog

Install

npm install ngx-promise-buttons

Quick start

import { Component } from '@angular/core';
import { PromiseBtnDirective } from 'ngx-promise-buttons';

@Component({
  selector: 'app-example',
  imports: [PromiseBtnDirective],
  template: `
    <button (click)="someAction()"
       [promiseBtn]="promiseSetBySomeAction">Click me to spin!</button>
  `,
})
export class ExampleComponent {
  promiseSetBySomeAction: Promise<unknown>;

  someAction() {
    this.promiseSetBySomeAction = new Promise((resolve) => {
      setTimeout(resolve, 2000);
    });
  }
}

Optional global config at bootstrap:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideNgxPromiseButtons } from 'ngx-promise-buttons';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgxPromiseButtons({ handleCurrentBtnOnly: true }),
  ],
});

Why this package instead of angular2-promise-buttons?

This library is a maintained fork of angular2-promise-buttons. The original package stopped keeping pace with Angular’s platform changes, so apps on newer Angular versions hit friction: outdated peer/tooling support, NgModule-only setup (forRoot), and little ongoing maintenance for current releases.

Use ngx-promise-buttons when you need:

• Support for modern Angular (upgraded through Angular 22)
• A standalone API via provideNgxPromiseButtons() and PromiseBtnDirective (no NgModule required)
• An actively maintained drop-in for the same promise/boolean/subscription button loading behavior

If you are still on a very old Angular / View Engine setup and already depend on angular2-promise-buttons, you can keep using that package. For Angular 13+ projects—especially standalone apps—prefer this one.

Works with

| Input | Behavior | |--------|----------| | Promise | Spinner while pending | | RxJS Subscription | Spinner until unsubscribed/complete | | boolean | Spinner while true |

Compatible with Angular 9-22, standalone components, and TypeScript.

Styling the button

No base styles ship with the directive, so you can match your design system. Add any CSS spinner to your global stylesheet.

Resources:

• https://cssload.net/
• https://projects.lukehaas.me/css-loaders/
• https://tobiasahlin.com/spinkit/

Selectors:

• .is-loading on the button while pending
• <span class="btn-spinner"></span> inside the button

Configuration

Pass a config object to provideNgxPromiseButtons:

provideNgxPromiseButtons({
  spinnerTpl: '<span class="btn-spinner"></span>',
  disableBtn: true,
  btnLoadingClass: 'is-loading',
  handleCurrentBtnOnly: false,
  minDuration: null,
});

provideNgxPromiseButtons() is optional — omit it if the defaults are fine.

Using observables

Pass a subscription to the directive, not the observable itself.

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:
const observable = FAKE_FACTORY.initObservable();
this.passedToDirective = observable;

Using booleans

<button (click)="someAction()"
   [promiseBtn]="isShowBoolean">Click!</button>

Links

• Demo: https://meysamsahragard.github.io/ngx-promise-buttons/
• npm: https://www.npmjs.com/package/ngx-promise-buttons
• Issues: https://github.com/meysamsahragard/ngx-promise-buttons/issues
• Changelog: https://github.com/meysamsahragard/ngx-promise-buttons/blob/master/CHANGELOG.md

Contributing

Contribution guidelines: CONTRIBUTING.md