Home Angular Simple Angular 6+ Material Design Progress Buttons

Simple Angular 6+ Material Design Progress Buttons

Angular webcodeflow · July 3, 2022 · Comments off

mat-progress buttons are simple Material Design progress buttons for Angular 4+ applications.

angular progress bar example, dynamic progress bar in angular, angular material progress bar example, mat progress bar color stackblitz, change mat progress bar color dynamically

How to make use of it:

Installation

npm install --save mat-progress-buttons

Usage

import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons';

@Component({
  selector: 'app-home',
  template: '<mat-spinner-button (btnClick)="btnClick()" [options]="btnOpts"></mat-spinner-button>'
})
export class SomeComponent {

  // Button Options
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: false,
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    customClass: 'some-class',
    // add an icon to the button
    buttonIcon: {
      fontSet: 'fa',
      fontIcon: 'fa-heart',
      inline: true
    }
  };

  // Click handler
  btnClick(): void {
    this.btnOpts.active = true;
    setTimeout(() => {
      this.btnOpts.active = false;
    }, 3350);
  }
};

angular material design progress buttons, mat-progress-buttons Plugin/Github