What causes "Value of `options` input cannot be an empty array" in angular/components?

Ensure the array passed to [options] has at least one entry

angular/components · error · Error

Value of `options` input cannot be an empty array

Error message

Value of `options` input cannot be an empty array

What it means

MatTimepicker validates that the `options` input is not an empty array — an empty list would render a picker with no selectable times. The same constructor effect that guards against options+interval throws when options is non-null but has length 0.

Source

Thrown at src/material/timepicker/timepicker.ts:229

  readonly disabled: Signal<boolean> = computed(() => !!this._input()?.disabled());

  /** Classes to be passed to the timepicker panel. */
  readonly panelClass = input<string | string[]>();

  constructor() {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      validateAdapter(this._dateAdapter, this._dateFormats);

      effect(() => {
        const options = this.options();
        const interval = this.interval();

        if (options !== null && interval !== null) {
          throw new Error(
            'Cannot specify both the `options` and `interval` inputs at the same time',
          );
        } else if (options?.length === 0) {
          throw new Error('Value of `options` input cannot be an empty array');
        }
      });
    }

    // Since the panel ID is static, we can set it once without having to maintain a host binding.
    const element = inject<ElementRef<HTMLElement>>(ElementRef);
    element.nativeElement.setAttribute('mat-timepicker-panel-id', this.panelId);
    this._handleLocaleChanges();
    this._handleInputStateChanges();
    this._keyManager.change.subscribe(() =>
      this._activeDescendant.set(this._keyManager.activeItem?.id || null),
    );
  }

  /** Opens the timepicker. */
  open(): void {
    const input = this._input();

View on GitHub (pinned to 0411926e7d)

Solutions

Ensure the array passed to [options] has at least one entry
Initialize options only after data loads, or fall back to a default list
If no options are valid yet, set options to null and use `interval` or hide the timepicker

Example fix

// before
options = signal<MatTimepickerOption[]>([]);

// after
options = signal<MatTimepickerOption[] | null>(null); // set real options once loaded
// or guard: only bind when (options()?.length ?? 0) > 0

Defensive patterns

Strategy: validation

Validate before calling

function validOptions(options: MatTimepickerOption[] | null): boolean {
  return options === null || options.length > 0;
}
// usage
if (!validOptions(this.options())) throw new Error('options must be null or non-empty');

Type guard

function isNonEmptyOptions(o: MatTimepickerOption[] | null): o is MatTimepickerOption[] {
  return o !== null && o.length > 0;
}

Try / catch

try {
  this.options.set(candidate);
} catch (e) {
  if (String(e?.message).includes('empty array')) {
    this.options.set(null); // fall back to interval/default behavior
  }
}

Prevention

Never bind a literal [] to [options]
Fall back to null (or interval) when a filtered list is empty
Load async options before enabling the timepicker
Unit-test option filters to catch empty results early

When it happens

Trigger: Binding [options]="[]" (or a computed/filter that yields an empty array) on <mat-timepicker>.

Common situations: Filtering a time list by business hours where the filter result is empty at init; initializing options to [] before async data arrives; calling setInput('options', []) in tests.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/c34682bcc1bccc4b. Report an issue: GitHub.