mat-progress-buttons
    TypeScript icon, indicating that this package has built-in type declarations

    9.3.1 • Public • Published

    Anguar Material Design Progress Buttons

    npm version Build Status dependency Status devDependency Status

    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

    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

    $ git clone https://github.com/michaeldoye/mat-progress-buttons.git
    • link the mat-progress-buttons package
    $ ng build
    $ npm link ./dist/mat-progress-buttons

    or

    $ 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

    or

    $ ng serve --open
    • the app is now hosted by http://localhost:4200/

    Development

    1. clone this repo
    2. Install the dependencies by running npm i
    3. build the library ng buld
    4. test the library ng test
    5. Link the library npm link
    6. Navigate to the demo app's directory
    • cd demo _ npm i _ npm start

    License

    Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)

    Install

    npm i mat-progress-buttons

    DownloadsWeekly Downloads

    1,873

    Version

    9.3.1

    License

    MIT

    Unpacked Size

    83.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar