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

Anguar Material Design Progress Buttons

Demo

View all the directives in action at https://mat-progress-buttons.firebaseapp.com

StackBlitz demo https://stackblitz.com/edit/mat-progress-buttons-demo

Dependencies

Angular (requires Angular 2 or higher, tested with 2.0.0)
Angular Material

Installation

Install above dependencies via npm.

Now install mat-progress-buttons via:

npm install --save mat-progress-buttons

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for mat-progress-buttons:

map: {
  'mat-progress-buttons': 'node_modules/mat-progress-buttons/bundles/mat-progress-buttons.umd.js',
}

Once installed you need to import the main module:

import { MatProgressButtonsModule } from 'mat-progress-buttons';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatProgressButtonsModule .forRoot()):

import { MatProgressButtonsModule } from 'mat-progress-buttons';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatProgressButtonsModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import MatProgressButtonsModule:

import { MatProgressButtonsModule } from 'mat-progress-buttons';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatProgressButtonsModule, ...], 
})
export class OtherModule {
}

Usage

Spinner Button

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);
  }
};

Spinner button FAB

You can use the spinner button with a mat-fab with an icon. Both mat-icon and font awesome are supported.

To set up fontawesome to work with mat-icon you can see instructions here

Use the icon property on the options object

  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: true, // set fab to true
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    icon: {
      color: primary,
      fontSet: 'fa',
      fontIcon: 'fa-save',
      inline: true
    },
  };

Icon API

interface MatProgressButtonIcon {
  color?: ThemePalette; // icon color (primary or accent)
  fontIcon?: string;    // name of the icon (for fontawsome, use 'fa-[icon_name])'
  fontSet?: string;     // if using fontawesome, use 'fa' (omit for material icons)
  inline?: boolean;     // automatically size the icon
  svgIcon?: string;     // name of the icon in the SVG icon set.
}

More info in Angular Material Docs

Bar Button

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

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

  // Button Options
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    buttonColor: 'accent',
    barColor: 'accent',
    raised: false,
    stroked: true,
    flat: false,
    mode: 'indeterminate',
    value: 0,
    disabled: false,
    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);
  }
};

Overriding default CSS

To override CSS (color and background color of spinner buttons), you can write CSS for particular component and use ViewEncapsulation.None

Example:

CSS:

.class_name {
    background-color: red; // etc.
}

TS:

@Component({
  ...,
  encapsulation : ViewEncapsulation.None // Here
})

Note: Bar Button does not suppor the fab style, currently. Hope to have something like this soon.

Run Demo App Locally

clone this repo by running

$ git clone https://github.com/michaeldoye/mat-progress-buttons.git

link the mat-progress-buttons package

$ ng build
$ npm link ./dist/mat-progress-buttons

$ ng build
$ npm link ./dist/mat-progress-buttons
$ ng build --watch

navigate to the demo app directory

$ cd demo

install the dependencies

$ npm i

run/start/serve the app

$ npm run start

$ ng serve --open

the app is now hosted by http://localhost:4200/

Development

clone this repo
Install the dependencies by running npm i
build the library ng buld
test the library ng test
Link the library npm link
Navigate to the demo app's directory

cd demo _ npm i _ npm start

mat-progress-buttons