Package Exports

mat-progress-buttons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mat-progress-buttons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Material Design Progress Buttons

Very simple Angular4+ Material Design progress buttons

Demo

StackBlitz Demo

Usage

Import in any Angular application by running:

$ npm install --save mat-progress-buttons

Install Material Design: (Getting Started)

$ npm install --save @angular/material @angular/cdk

Install Angular Animations:

npm install --save @angular/animations

Import a material theme into your style.css file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Then from your AppModule:

...
// Import MatProgressButtons
import { MatProgressButtons } from 'mat-progress-buttons';


@NgModule({
  declarations: [ ... ],
  imports: [
    // Specify as an import
    MatProgressButtons
  ],
  // Add the Api service
  providers: [ ... ]
})
export class AppModule { }

Once MatProgressButtons is imported, you can use the components:

Progress Bar Button:

<progress-bar-button [options]="options" (click)="someFunc()"></progress-bar-button>

API:

@Input() options; // button options (see below)

Options:

active: boolean, // is loading
text: string, // button text
buttonColor?: string, // primary/accent/warn
barColor?: string, // primary/accent/warn
mode?: string, // determinate/intederminate
value?: number // used if mode is determinate

Progress Spinner Button:

<spinner-button [options]="options" (click)="someFunc()"></spinner-button>