Meter
Measurements using the native <meter> element. Browser shows colors based on low/high/optimum.
| Input | Type | Default | Description |
|---|---|---|---|
value | number | required | Current value |
min | number | 0 | Minimum value |
max | number | 1 | Maximum value |
low | number | — | Low threshold |
high | number | — | High threshold |
optimum | number | — | Optimal value |
Import & Usage
typescript
import { Component } from '@angular/core';
import { NgOatMeter } from '@letsprogram/ng-oat/meter';
@Component({
selector: 'app-example',
imports: [NgOatMeter],
template: `
<ng-oat-meter
[value]="0.8"
[low]="0.3"
[high]="0.7"
[optimum]="1" />
`,
})
export class ExampleComponent {}Color Zones
The browser adjusts the color automatically based on where the value falls relative to low/high/optimum.
html
<ng-oat-meter [value]="0.8" [low]="0.3" [high]="0.7" [optimum]="1" />
<ng-oat-meter [value]="0.5" [low]="0.3" [high]="0.7" [optimum]="1" />
<ng-oat-meter [value]="0.2" [low]="0.3" [high]="0.7" [optimum]="1" />Disk Usage Example
Disk usage: 75 GB of 100 GB
html
<ng-oat-meter
[value]="75"
[min]="0"
[max]="100"
[low]="30"
[high]="80"
[optimum]="50" />