Create SVG Gauges In Angular 4+

Description:

This is an Angular 4+ wrapper for the SVG-gauge library to help you generate SVG based gauges on your web app.

Installation:

# NPM
$ npm install angular-gauge --save

Usage:

Import the SVG gauge into your ngmodule.

import { Component, NgModule } from '@angular/core';
import { GaugeModule } from 'angular-gauge';

@NgModule({
  imports: [
    GaugeModule.forRoot()
  ]
})
export class MyModule {}

Use in your apps component.

@Component({
  template: `
    <mwl-gauge
      [max]="100"
      [dialStartAngle]="-90"
      [dialEndAngle]="-90.001"
      [value]="50"
      [animated]="true"
      [animationDuration]="1">
    </mwl-gauge>
  `
})
export class MyComponent {}

Options and event listeners

/**
 * The angle in degrees to start the dial
 */
@Input() dialStartAngle: number;

/**
 * The angle in degrees to end the dial. This MUST be less than dialStartAngle
 */
@Input() dialEndAngle: number;

/**
 * The radius of the gauge
 */
@Input() radius: number;

/**
 * The maximum value for the gauge
 */
@Input() max: number;

/**
 * Function that returns a string label that will be rendered in the center. This function will be passed the current value
 */
@Input() label: (value: number) => string;

/**
 * Whether to show the value at the center of the gauge
 */
@Input() showValue: boolean;

/**
 * The CSS class of the gauge
 */
@Input() gaugeClass: string;

/**
 * The CSS class of the gauge's dial
 */
@Input() dialClass: string;

/**
 * The CSS class of the gauge's fill (value dial)
 */
@Input() valueDialClass: string;

/**
 *  The CSS class of the gauge's text
 */
@Input() valueTextClass: string;

/**
 * The value of the gauge
 */
@Input() value: number;

/**
 * Whether to animate changing the gauge
 */
@Input() animated: boolean;

/**
 * Animation duration in seconds
 */
@Input() animationDuration: number;

/**
 * Called when the gauge is created
 */
@Output() gaugeCreated: EventEmitter<{gauge: any}> = new EventEmitter();

Preview: