API for timepicker

API reference for Angular Material timepicker

import {MatTimepickerModule} from '@angular/material/timepicker';

Renders out a listbox that can be used to select a time of day. Intended to be used together with MatTimepickerInput.

Selector: mat-timepicker

Exported as: matTimepicker
Properties
Name Description

activeDescendant: Signal<string | null>

ID of the active descendant option.

ariaLabel: InputSignal<string | null>

ARIA label for the timepicker panel.

ariaLabelledby: InputSignal<string | null>

ID of the label element for the timepicker panel.

closed: OutputEmitterRef<void>

Emits when the timepicker is closed.

disableRipple: InputSignalWithTransform<boolean, unknown>

Whether ripples within the timepicker should be disabled.

disabled: Signal<boolean>

Whether the timepicker is currently disabled.

interval: InputSignalWithTransform<number | null, number | string | null>

Interval between each option in the timepicker. The value can either be an amount of seconds (e.g. 90) or a number with a unit (e.g. 45m). Supported units are s for seconds, m for minutes or h for hours.

isOpen: Signal<boolean>

Whether the timepicker is open.

opened: OutputEmitterRef<void>

Emits when the timepicker is opened.

options: InputSignal<readonly MatTimepickerOption<D>[] | null>

Array of pre-defined options that the user can select from, as an alternative to using the interval input. An error will be thrown if both options and interval are specified.

panelId: string

Unique ID of the timepicker's panel

selected: OutputEmitterRef<MatTimepickerSelected<D>>

Emits when the user selects a time.

Methods
close

Closes the timepicker.

open

Opens the timepicker.

registerInput

Registers an input with the timepicker.

Parameters

input

MatTimepickerInput<D>

Input that can be used to enter time and connect to a mat-timepicker.

Selector: input[matTimepicker]

Exported as: matTimepickerInput
Properties
Name Description

disabled: Signal<boolean>

Whether the input is disabled.

max: InputSignalWithTransform<D | null, unknown>

Maximum time that can be selected or typed in. Can be either a date object (only time will be used) or a valid time string.

min: InputSignalWithTransform<D | null, unknown>

Minimum time that can be selected or typed in. Can be either a date object (only time will be used) or a valid time string.

timepicker: InputSignal<MatTimepicker<D>>

Timepicker that the input is associated with.

value: ModelSignal<D | null>

Current value of the input.

Methods
focus

Focuses the input.

getOverlayOrigin

Gets the element to which the timepicker popup should be attached.

Returns
ElementRef<HTMLElement>

Button that can be used to open a mat-timepicker.

Selector: mat-timepicker-toggle

Exported as: matTimepickerToggle
Properties
Name Description

ariaLabel: input<string | undefined>(undefined, { alias: 'aria-label', })

Screen-reader label for the button.

disableRipple: InputSignalWithTransform<boolean, unknown>

Whether ripples on the toggle should be disabled.

disabled: InputSignalWithTransform<boolean, unknown>

Whether the toggle button is disabled.

timepicker: InputSignal<MatTimepicker<D>>

Timepicker instance that the button will toggle.

Time selection option that can be displayed within a mat-timepicker.

Properties
Name Description

label: string

Label to show to the user.

value: D

Date value of the option.

Object that can be used to configure the default options for the timepicker component.

Properties
Name Description

disableRipple: boolean

Whether ripples inside the timepicker should be disabled by default.

interval: string | number

Default interval for all time pickers.

Event emitted when a value is selected in the timepicker.

Properties
Name Description

source: MatTimepicker<D>

value: D

Injection token that can be used to configure the default options for the timepicker component.

const MAT_TIMEPICKER_CONFIG: InjectionToken<MatTimepickerConfig>;

API reference for Angular Material timepicker-testing

import {MatTimepickerHarness} from '@angular/material/timepicker/testing';

Properties
Name Description

static hostSelector: 'mat-timepicker'

Methods
async
getOptions

Gets the options inside the timepicker panel.

Parameters

filters?

Omit<OptionHarnessFilters, "ancestor">

Returns
Promise<MatOptionHarness[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isOpen

Whether the timepicker is open.

Returns
Promise<boolean>

async
selectOption

Selects the first option matching the given filters.

Parameters

filters

OptionHarnessFilters

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a timepicker with specific attributes.

Parameters

options

TimepickerHarnessFilters = {}

Options for filtering which timepicker instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard Material timepicker inputs in tests.

Properties
Name Description

static hostSelector: '.mat-timepicker-input'

Methods
async
blur

Blurs the input and returns a promise that indicates when the action is complete.

Returns
Promise<void>

Promise that resolves when the action completes.

async
closeTimepicker

Closes the timepicker associated with the input.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the input and returns a promise that indicates when the action is complete.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getPlaceholder

Gets the placeholder of the input.

Returns
Promise<string>

async
getTimepicker

Gets the MatTimepickerHarness that is associated with the input.

Parameters

filter

TimepickerHarnessFilters = {}

Optionally filters which timepicker is included.

Returns
Promise<MatTimepickerHarness>

async
getValue

Gets the value of the input.

Returns
Promise<string>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the input is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the input is focused.

Returns
Promise<boolean>

async
isRequired

Whether the input is required.

Returns
Promise<boolean>

async
isTimepickerOpen

Gets whether the timepicker associated with the input is open.

Returns
Promise<boolean>

async
openTimepicker

Opens the timepicker associated with the input and returns the timepicker instance.

Returns
Promise<MatTimepickerHarness>

async
setValue

Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

Parameters

newValue

string

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a MatTimepickerInputHarness that meets certain criteria.

Parameters

options

TimepickerInputHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard Material timepicker toggle in tests.

Properties
Name Description

static hostSelector: '.mat-timepicker-toggle'

Methods
async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the toggle is disabled.

Returns
Promise<boolean>

async
isTimepickerOpen

Gets whether the timepicker associated with the toggle is open.

Returns
Promise<boolean>

async
openTimepicker

Opens the timepicker associated with the toggle.

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a MatTimepickerToggleHarness that meets certain criteria.

Parameters

options

TimepickerToggleHarnessFilters = {}

Options for filtering which timepicker toggle instances are considered a match.

Returns
HarnessPredicate<MatTimepickerToggleHarness>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatTimepickerHarness instances.

A set of criteria that can be used to filter a list of timepicker input instances.

Properties
Name Description

placeholder: string | RegExp

Filters based on the placeholder text of the input.

value: string | RegExp

Filters based on the value of the input.

A set of criteria that can be used to filter a list of timepicker toggle instances.

Azure & Blue theme selected.