mat-fab-progress
This work is a port and enhancement of https://codepen.io/mindstorm/pen/ezJZzJ developed by https://codepen.io/mindstorm/
The enhancement is to an additional action to the Progress Spinner Floating Action Button.
Installation
To install this library, run:
npm install @darkedges/mat-fab-progress --saveConsuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
npm install mat-fab-progress @angular/animations @angular/material @angular/cdk --savenote: @angular/material requires @angular at version ^4.4.1
create a file material.module.ts
import {NgModule} from '@angular/core';
import {
MatButtonModule,
MatCardModule,
MatIconModule,
MatProgressSpinnerModule,
MatRadioModule
} from '@angular/material';
@NgModule({
exports: [
MatButtonModule,
MatCardModule,
MatIconModule,
MatProgressSpinnerModule,
MatRadioModule
]
})
export class AppMaterialModule {}and then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFabProgressModule } from '@darkedges/mat-fab-progress';
import { AppComponent } from './app.component';
import { AppMaterialModule } from './material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatFabProgressModule,
AppMaterialModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Once the component is imported use the following:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ProgressSpinner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>styles.css
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";app.component.ts
import { Component } from '@angular/core';
import { MatFabProgress } from '@darkedges/mat-fab-progress';
import { interval, map, Observable, take } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
private $counter!: Observable<number>;
fabProgress: MatFabProgress;
constructor() {
this.fabProgress = new MatFabProgress();
this.fabProgress.fab.icon = 'mic';
this.fabProgress.fab.iconDone = '';
}
reset(event: any) {
this.$counter = interval(1000).pipe(
take(5),
map(function (n: number) {
const v = (n * 20) + 20;
return v;
})
)
this.$counter.subscribe((x) => {
console.log(x);
this.fabProgress.progress.value = x;
if (x === 100) {
this.fabProgress.fab.icon = 'file_upload';
this.fabProgress.progress.mode = 'indeterminate';
setTimeout(() => {
this.fabProgress.progress.mode = 'determinate';
this.fabProgress.fab.iconDone = 'done';
this.fabProgress.progress.value++;
this.fabProgress.fab.color = 'done';
}, 1500);
}
});
}
}app.component.html
<!-- You can now use your library component in app.component.html -->
<mat-card>
<mat-card-content>
<mat-fab-progress [fabColor]="fabProgress.fab.color" [progressColor]="fabProgress.progress.color" [fabIcon]="fabProgress.fab.icon"
[fabIconDone]="fabProgress.fab.iconDone" [progressValue]="fabProgress.progress.value" [progressMode]="fabProgress.progress.mode"
(fabAction)="reset($event)"></mat-fab-progress>
</mat-card-content>
</mat-card>Attributes
| Attribute | Description |
|---|---|
fabColor |
The color to be used for the FAB. |
fabIcon |
Name of the icon in the SVG icon set for the initial entry. |
fabIconDone |
Name of the icon in the SVG icon set for when everything has completed. |
fabAction |
The function to call when the FAB is clicked. |
progressColor |
The color to be used for the Progress Spinner. |
progressMode |
The mode of the Progress Spinner. Either determinate or indeterminate
|
progressValue |
The current value for the Progress Spinner. Number between 0 and 100
|
Example
There is an example in the projects/mat-fab-progress-app directory. It requires angular-cli. Start by issuing the following.
cd example
npm install -g @angular/cli
npm install
ng serve --preserve-symlinkDevelopment
To generate all *.js, *.d.ts and *.metadata.json files:
ng build mat-fab-progressTo lint all *.ts files:
ng lint mat-fab-progressLicense
MIT © Nicholas Irving