angular/components · error · Error

Cannot specify both the `options` and `interval` inputs at t

Error message

Cannot specify both the `options` and `interval` inputs at the same time

What it means

MatTimepicker accepts either a fixed `options` array or an `interval` for generating time options, but not both. A reactive effect in the constructor watches both inputs and throws as soon as both are non-null, since the resulting option list would be ambiguous.

Source

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

    alias: 'aria-labelledby',
  });

  /** Whether the timepicker is currently disabled. */
  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),
    );
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Remove either the [options] or [interval] binding so only one remains
If both are computed dynamically, null out one before setting the other (e.g. this.options.set(null))
Centralize the choice in a single computed signal that exposes exactly one non-null value

Example fix

// before
<mat-timepicker [options]="options" [interval]="'30m'"></mat-timepicker>

// after
<mat-timepicker [options]="options"></mat-timepicker>
// or
<mat-timepicker [interval]="'30m'"></mat-timepicker>

Defensive patterns

Strategy: validation

Validate before calling

// Validate before binding
function pickTimeConfig(options: T[] | null, interval: string | null) {
  if (options !== null && interval !== null) {
    throw new Error('Pass either options or interval, not both');
  }
  return {options, interval};
}

Try / catch

try {
  this.timepickerOptions = options();
  this.timepickerInterval = interval();
} catch (e) {
  if (String(e?.message).includes('`options` and `interval`')) {
    this.timepickerInterval = null; // prefer options
  }
}

Prevention

Bind only one of [options] / [interval] per mat-timepicker
Null out the other input when switching modes
Enforce exclusivity in a single source-of-truth signal/config object
Add a lint/test asserting templates don't contain both bindings

When it happens

Trigger: Template binds both inputs, e.g. `<mat-timepicker [options]="opts" [interval]="'30m'">`, or code sets the second input via setInput while the first is still set (including signal defaults where both are non-null).

Common situations: Copy-pasting examples that each use a different input; refactoring from interval to options without removing the old binding; TestBench/component harness tests calling setInput twice.

Related errors

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