[](https://github.com/mattlewis92/angular-gauge/actions/workflows/ci.yml) [






https://mattlewis92.github.io/angular-gauge/
- About
- Compatibility
- Installation
- Documentation
- Development
- License
A tiny angular 15.0+ wrapper for https://github.com/naikus/svg-gauge
| angular-gauge | Angular |
| ------------- | ------- |
| <=3.x.x | <=9 |
| 4.x.x | 10 |
| 5.x.x | 15+ |
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:
[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.
``
All documentation is auto-generated from the source via compodoc and can be viewed here:
https://mattlewis92.github.io/angular-gauge/docs/
- Install Node.js and NPM (should come with)
- Install local dev dependencies: npm install while current directory is this repo
Run npm start to start a development server on port 8000 with auto reload + tests.
Run npm test to run tests once or npm run test:watch to continually run tests.
`bash``
npm run release
MIT