@darkedges/mat-fab-progress

v15.0.1

Published

2 years ago

This work is a port and enhancement of [https://codepen.io/mindstorm/pen/ezJZzJ](https://codepen.io/mindstorm/pen/ezJZzJ) developed by [https://codepen.io/mindstorm/](https://codepen.io/mindstorm/)

Downloads

0High
0Medium
0Low

darkedges

angular material fab progress spinner

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 --save

Consuming 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 --save

note: @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-symlink

Development

To generate all *.js, *.d.ts and *.metadata.json files:

ng build mat-fab-progress

To lint all *.ts files:

ng lint mat-fab-progress

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme