NgxProgressButton - Add a spinner or progressbar to your buttons

* This Angular Directive adds a MatProgressSpinner or a MatProgressBar to any button.

* Works on any element but with the caveat that the css display property will be set to 'relative'. (To be resolved in a near-term version)

* MatButtons are optionally disabled by default when a loading event occurs. (This feature will support arbitrary host elements soon)

* Optional initial timeout before a progress indicator is displayed. Host button is disabled immediately for debouncing.

This library was generated with Angular CLI version 9.1

Installation

npm install ngx-progress-button

Usage

Your .html file:

    <button mat-raised-button
        [buttonSpinner]="isLoggingIn"
        color="primary"
        (click)="login()"
    >
        <mat-icon>login<mat-icon> Login
    </button>

    <!-- In this example the 'disabled' state will be set to 'isImageLoaded' when loadImage() completes.
         In the absence of 'buttonSpinnerHostDisabled', the disabled state will be set to 'false' - overriding
         the disabled state assigned by the application.
         NOTE: Setting the host button's disabled property as shown below is not required by ngx-progress-button
         directives and does not affect their behavior.
    -->
    <button mat-icon-button
        [buttonSpinner]="isLoadingImage"
        [buttonSpinnerHostDisabled]="isImageLoaded"
        [disabled]="isImageLoaded"
        color="primary"
        (click)="loadImage()"
    >
        <mat-icon>file_upload<mat-icon>
    </button>

    <button
        [buttonProgressBar]="isLoadingData"
        color="primary"
        (click)="loadData()"
    >
       Load
    </button>

Your .ts file:

    login() {
        // Activate the buttonSpinner.  The button will be disabled immediately.
        this.isLoggingIn = true;

        this.authenticationService.login(username.value, password.value).pipe(take(1)).subscribe({
            next: data => {
                ...
                // Deactivate the buttonSpinner.
                this.isLoggingIn = false;
            }
        }};
    }

    loadImage() {
        // Activate the buttonSpinner.  The button will be disabled immediately.
        this.isLoadingImage = true;

        this.userService.loadData(username.value).pipe(take(1)).subscribe({
            next: data => {
                ...
                // Deactivate the buttonSpinner.
                this.isLoadingImage = false;
                // We want the image load button to remain disabled.
                this.isImageLoaded = true;
            }
        }};
    }

    loadData() {
        // Activate the buttonProgressBar. The button will disabled immediately (if it's a MatButton).
        // NOTE: Disablement will be extended to other elements in a future version.
        this.isLoadingData = true;

        this.userService.loadData(username.value).pipe(take(1)).subscribe({
            next: data => {
                ...
                // Dectivate the buttonProgressBar.
                this.isLoadingData = false;
            }
        }};
    }

Your module file for a module that will use a ngx-progress-button directive:

    import { NgxProgressButtonModule } from 'ngx-progress-button';

    ...

    imports: [
        ...
        NgxProgressButtonModule,
        ...
    ],

Options

[buttonSpinner] Directive:

| Directive Property | MatProgressSpinner Property | Description | Default Value | -------------------------- | ------------------ | -------------------------------------------------- | ------------- | buttonSpinnerColor | color | *Theme color palette. | primary | buttonSpinnerMode | mode | *Mode of the progress spinner. Values: determinate, indeterminate | indeterminate | buttonSpinnerValue | value | *Value of the progress spinner. | 0 | buttonSpinnerDiameter | diameter | *The diameter of the progress spinner. | 19 | buttonSpinnerStrokeWidth | strokeWidth | *Stroke width of the progress spinner. | Determined by Angular framework. | buttonSpinnerDelay | n/a | Delay display of the progress spinner. NOTE: Disablement is immediate. | 1000 (millisecs) | buttonSpinnerDisableHost | n/a | Disable the host button when [buttonSpinner]=true. NOTE: Applicable to MatButtons only in the current version. | true | buttonSpinnerHostDisabled| n/a | An optional 'disabled' state to be applied to the host button at the end of a loading event. NOTE: Applicable to MatButtons only in the current version. | n/a

*See MatProgressSpinner for details.

[buttonProgressBar] Directive:

| Directive Property | MatProgressBar Property | Description | Default Value | ------------------------------ | ------------------ | ----------------------------------------------- | ------------- | buttonProgressBarColor | color | *Theme color palette. | primary | buttonProgressBarMode | mode | *Mode of the progress bar. Values: determinate, indeterminate, buffer, query | indeterminate | buttonProgressBarValue | value | *Value of the progress bar. | 0 | buttonProgressBarBufferValue | bufferValue | *Buffer value of the progress bar. | 0 | buttonProgressBarDelay | n/a | Delay display of the progress bar. NOTE: Disablement is immediate. | 1000 (millisecs) | buttonProgressBarDisableHost | n/a | Disable the host button when [buttonProgressBar]=true. NOTE: Applicable to MatButtons only in the current version. | true | buttonProgressBarHostDisabled| n/a | An optional 'disabled' state to be applied to the host button at the end of a loading event. NOTE: Applicable to MatButtons only in the current version. | n/a

*See MatProgressBar for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.