angular gauge


Demo

https://mattlewis92.github.io/angular-gauge/

Table of contents

- About
- Compatibility
- Installation
- Documentation
- Development
- License

About

A tiny angular 15.0+ wrapper for https://github.com/naikus/svg-gauge

Compatibility

| angular-gauge | Angular |
| ------------- | ------- |
| <=3.x.x | <=9 |
| 4.x.x | 10 |
| 5.x.x | 15+ |

Installation

Install through npm:

``
npm install --save angular-gauge
`

Then include in your apps module:

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

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

By default no styling is included with the gauge so you need to define some global styles:

`css
mwl-gauge {
width: 150px;
height: 150px;
display: block;
padding: 10px;
}
mwl-gauge > .gauge > .dial {
stroke: #eee;
stroke-width: 2;
fill: rgba(0, 0, 0, 0);
}
mwl-gauge > .gauge > .value {
stroke: rgb(47, 227, 255);
stroke-width: 2;
fill: rgba(0, 0, 0, 0);
}
mwl-gauge > .gauge > .value-text {
fill: rgb(47, 227, 255);
font-family: sans-serif;
font-weight: bold;
font-size: 1em;
}
`

Finally use in one of your apps components:

`typescript
import { Component } from '@angular/core';

@Component({
template:
[max]="100"
[dialStartAngle]="-90"
[dialEndAngle]="-90.001"
[value]="50"
[animated]="true"
[animationDuration]="1"
>

,
})
export class MyComponent {}
`

You may also find it useful to view the demo source.

This lib is just a tiny wrapper over the excellent svg-gauge library.

$3

`


`

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here:
https://mattlewis92.github.io/angular-gauge/docs/

Development

$3

- Install Node.js and NPM (should come with)
- Install local dev dependencies: npm install while current directory is this repo

$3

Run npm start to start a development server on port 8000 with auto reload + tests.

$3

Run npm test to run tests once or npm run test:watch to continually run tests.

$3

`bash
npm run release
``

License

MIT