angular2-promise-buttons

angular2-promise-buttons

Chilled Buttons for Angular2

For angular 1.x version go here.

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/dist';

@NgModule({
  imports: [
    Angular2PromiseButtonModule
      .forRoot(
        // your custom config goes here
      ),
  ],
})
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>

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 <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/dist';

@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 {
}

Changelog

1.0.0 (2017-05-09)

Bug Fixes

• add jasmine types again to tsconfig (e59f8bb)
• aot and prod build not working (5e3fd11)
• build tsconfig for building the module (885b185)
• forRoot containing conditional logic (a6b52f6)

Features

• add readme (52f84a7)
• use Renderer2 for adding and removing classes (e2c9555)

<a name="0.1.5"></a>