Gauge for Angular

import { AuiGauge } from '@absoluteui/angular/gauge';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Gauge page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { gauge: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiGauge } from '@absoluteui/angular/gauge';
import type { GaugeBand } from '@absoluteui/components/gauge';

@Component({
  selector: 'app-cpu',
  imports: [AuiGauge],
  template: `<aui-gauge label="CPU load" [value]="load" [bands]="bands" [target]="60"></aui-gauge>`,
})
export class CpuComponent {
  readonly load = 72;
  readonly bands: GaugeBand[] = [{ to: 50, label: 'Normal' }, { to: 80, label: 'Busy' }, { to: 100, label: 'Critical' }];
}

<aui-gauge>

Class AuiGauge; template reference #ref="auiGauge".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. What is measured: visible title and the accessible name of the meter (aria-labelledby).
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible text below the gauge (text only). Not referenced by aria-describedby.
value	number | null		Required. Current value. null (or a non-finite number) shows an em dash and the value text “No value”; aria-valuenow is removed. Values outside min-max are clamped on the arc and in aria-valuenow; the value text keeps the real value.
min	number	'0'	Range start (finite).
max	number	'100'	Range end (finite, greater than min).
bands	readonly GaugeBand[]		Qualitative bands { to: number, label: string, color?: 1-8 } in ascending to order; the first band starts at min. Drawn as a thin arc outside the track; the current band’s label is printed under the reading and appended to the value text.
target	number		Target value marked across the arc; appended to the value text (“target 60%”).
color	GaugeColor		Palette slot of the value arc. Default: the current band’s color (its color, else its position), else 1.
valueFormat	NumberFormatOptions		Number format for the reading, range ends, target, and value text.
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere.
valueText	string		Replaces the generated aria-valuetext.
showRange	boolean	true	Print the formatted min and max under the ends of the arc.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	Accepted for configuration consistency; the gauge is not mirrored (min at the lower left, clockwise to max at the lower right).