View all the directives in action at https://mat-progress-buttons.firebaseapp.com
StackBlitz demo https://stackblitz.com/edit/mat-progress-buttons-demo
- Angular (requires Angular 2 or higher, tested with 2.0.0)
- Angular Material
Install above dependencies via npm.
Now install mat-progress-buttons via:
npm install --save mat-progress-buttonsNote:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,mapneeds to tell the System loader where to look format-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 {
}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);
}
};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
Note: Bar Button does not support the fab style, currently.
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
},
};
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
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 = { ...this.btnOpts, active: true };
setTimeout(() => {
this.btnOpts = { ...this.btnOpts, active: false };
}, 3350);
}
};Optionally pass default MatProgressButtonOptions in forRoot in side your app.modlue.ts for each button as an array.
const button1: MatProgressButtonOptions = {
id: 'button1', // Id should match the [buttonId] input
...
};
const button2: MatProgressButtonOptions = {
id: 'button2', // Id should match the [buttonId] input
...
};
@NgModule({
imports: [
MatProgressButtonsModule.forRoot([button1, button2]),
],
declarations: [HomeComponent],
})<mat-bar-button
(btnClick)="someFunc3()"
[buttonId]="'button1'"
[active]="buttonState"
></mat-bar-button>[options] will override Global Options provided in forRoot
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;
}TS:
@Component({
...,
encapsulation: ViewEncapsulation.None
})
class MyComponent {}- 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-buttonsor
$ 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 startor
$ ng serve --open- the app is now hosted by
http://localhost:4200/
- 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 ./dist/mat-progress-buttons - Navigate to the demo app's directory:
cd demonpm inpm start
Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent