mat-gauge v0.0.8

mat-gauge

An Angular Material style fully customizable Gauge component for Angular 8+ apps.

Getting Started

step 1: Install npm module

npm install --save mat-gauge 

This will install the current stable version of mat-gauge in your node_modules directory and save the entry in package.json.

Step 2: Import the MatGaugeModule

import { MatGaugeModule } from 'mat-gauge';

@NgModule({
    ...
    imports: [MatGaugeModule],
    ...
})

export class AppModule {}

Be sure to import MatGaugeModule after Angular's BrowserModule, as the import order matters for NgModules.

Step 3: Use gauge component in HTML

MatGaugeModule provides a <mat-gauge> component which can be used in any angular template to render a gauge. It's configuration properties can be bind to a typescript variable as shown below:

import { Component } from '@angular/core';
import { GaugeOptions } from 'mat-gauge';

@Component({
    selector: 		'app-component',
    templateUrl: 	'app.html'
})

export class AppComponent {
    
    public min: number = 0; // not required, default = 0
    public max: number = 100; // not required, default = 100
    public unit: string = 0; // not required, default = null
    public value: number = 40; // required, default = 0
    public options: GaugeOptions = {
		'fill': '#2196F3',
		'color': '#FFFFFF',
		'empty': '#424242',
		'width': 100,
		'font-size': 15,
		'background': '#212121',
		'band-width': 4
	}; // not required, default seen here
}

<mat-gauge  [min]="min"
			[max]="max"
			[unit]="unit"
			[value]="value"
			[options]="options">
</mat-gauge>

License

MIT License