Time Picker for Angular

import { AuiTimePicker } from '@absoluteui/angular/time-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { plainTime, type PlainTime } from '@absoluteui/core';
import { AuiTimePicker } from '@absoluteui/angular/time-picker';

@Component({
  selector: 'app-opening-hours',
  imports: [ReactiveFormsModule, AuiTimePicker],
  template: `<aui-time-picker label="Opening time" [min]="min" [step]="15" [required]="true" [formControl]="opensAt"></aui-time-picker>`,
})
export class OpeningHoursComponent {
  readonly min = plainTime(6, 0);
  readonly opensAt = new FormControl<PlainTime | null>(null, { validators: [Validators.required] });
}

`<aui-time-picker>`

Class AuiTimePicker; template reference #ref="auiTimePicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is PlainTime \| 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`	`PlainTime \| null`	`null`	Earliest allowed time (inclusive); first suggestion. Must not be after max.
`max`	`PlainTime \| null`	`null`	Latest allowed time (inclusive); last possible suggestion.
`name`	`string`		Form field name for the hidden input (HH:MM or HH:MM:SS).
`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 segments and the button; not submitted.
`readOnly`	`boolean`	`false`	Focusable and submitted; not editable and the listbox does not open.
`validate`	`(value: PlainTime \| null) => string \| null`		Consumer validation after built-in checks; return a message to mark the value invalid.
`icons`	`Partial<TimePickerIcons>`		Icon slot overrides.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear; afterwards they update live.
`granularity`	`TimePickerGranularity`	`'minute'`	Adds a second segment when ‘second’.
`hourCycle`	`TimePickerHourCycle`	`'auto'`	12- or 24-hour entry and display; ‘auto’ follows the locale.
`step`	`number`	`'30'`	Minutes between suggested times (integer 1..720). Does not constrain typed values.
`locale`	`string`	`'en-US'`	Segment order, hour cycle (auto), day periods, option labels, and messages.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Listbox alignment direction (applied when the listbox opens).

Two-way bindings

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

Outputs

Output	Payload	Description
`(changed)`	`TimePickerChangeDetail`	The user changed the value or its validity (typing, stepping, or choosing a suggestion). Re-emits `aui-change`.
`(opened)`	`null`	Listbox opened. Re-emits `aui-open`.
`(closed)`	`null`	Listbox closed. Re-emits `aui-close`.

Read-only state

Property	Type	Description
`isOpen`	`Signal<boolean>`	Whether the listbox is shown.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`open(): void`	Show the listbox and focus it; the option nearest the value (or the first) becomes active.
`close(): void`	Hide the listbox without changing the value; focus inside it returns to the button.
`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`	HH:MM (HH:MM:SS at second granularity), or null.
`focus(): void`	Focus the first segment.
`reset(): void`	Close, restore the initial value, and clear dirty/touched/submitted state.