This is only a maintenance fork from the original repo which seems to be abandoned by the author.
Newest release @javastartpl/mat-progress-buttons
here:
Since I use this in my project and updating to newer Angular versions resulted in some errors/warnings given by this library I've decided to update it by removing the peerDependencies
restrictions.
There are no plans of further development of this library from my side.
Release with npm run release
Below are the original docs.
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-buttons
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 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-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/
- 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 demo
npm i
npm start
Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)