Duration Picker for Angular

import { AuiDurationPicker } from '@absoluteui/angular/duration-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { duration, type Duration } from '@absoluteui/core';
import { AuiDurationPicker } from '@absoluteui/angular/duration-picker';

@Component({
  selector: 'app-task-estimate',
  imports: [ReactiveFormsModule, AuiDurationPicker],
  template: `<aui-duration-picker label="Estimate" [max]="max" [step]="step" [required]="true" [formControl]="estimate"></aui-duration-picker>`,
})
export class TaskEstimateComponent {
  readonly max = duration(8 * 3_600_000);
  readonly step = duration(15 * 60_000);
  readonly estimate = new FormControl<Duration | null>(null, { validators: [Validators.required] });
}

`<aui-duration-picker>`

Class AuiDurationPicker; template reference #ref="auiDurationPicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is Duration \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Visible label and accessible name of the group (via aria-labelledby).
`hideLabel`	`boolean`	`false`	Visually hide the label; it remains the accessible name.
`min`	`Duration \| null`	`null`	Inclusive lower bound for validation and stepping (non-negative). Stepping stops at zero when unset. Must not exceed max.
`max`	`Duration \| null`	`null`	Inclusive upper bound for validation and stepping (non-negative); also sets the digits and aria-valuemax of the largest segment.
`step`	`Duration`	`'one of the smallest unit'`	Increment of the smallest segment and the valid-value grid from zero. Positive and a whole number of the smallest unit.
`name`	`string`		Form field name for the hidden input (ISO 8601 duration, for example PT1H30M).
`description`	`string`		Help text referenced by the group’s aria-describedby.
`required`	`boolean`	`false`	An empty entry is invalid; segments are required and the required indicator is shown.
`disabled`	`boolean`	`false`	Disables the segments; not submitted.
`readOnly`	`boolean`	`false`	Focusable and submitted; not editable, and stepping, Home/End, and separators are ignored.
`validate`	`(value: Duration \| null) => string \| null`		Consumer validation after built-in checks; return a message to mark the value invalid.
`icons`	`Partial<DurationPickerIcons>`		Icon slot overrides.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear; afterwards they update live.
`fields`	`readonly DurationField[]`	`'hours,minutes'`	Unit segments, largest first, as a contiguous non-empty run of ‘days’ \| ‘hours’ \| ‘minutes’ \| ‘seconds’.
`locale`	`string`	`'en-US'`	Segment names, unit text and its position, aria-valuetext, durations in messages, and messages.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Direction of the group; ArrowLeft/ArrowRight follow it.

Two-way bindings

Model	Type	Change output	Description
`[(value)]`	`Duration \| null`	`(valueChange)`	The value: `[(value)]` without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
`(changed)`	`DurationPickerChangeDetail`	The user changed the value or its validity error (typing, stepping, Home/End, or a separator). Re-emits `aui-change`.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`reportValidity(): boolean \| undefined`	Show messages now and return validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); cleared when the user edits.
`getFormValue(): string \| null \| undefined`	ISO 8601 duration in hours, minutes, and seconds (PT1H30M), or null when empty or invalid.
`focus(): void`	Focus the first (largest) segment.
`reset(): void`	Restore the initial value and clear dirty/touched/submitted state (no events).