angular/components · error · Error

ConnectedPosition: Invalid ${property} "${value}". Expected

Error message

ConnectedPosition: Invalid ${property} "${value}". Expected "top", "bottom" or "center".

What it means

validateVerticalPosition checks that every vertical connection value in a ConnectedPosition (originY / overlayY) is one of 'top', 'bottom', or 'center'. An invalid string (typo, wrong casing, or bad runtime data) throws at position-strategy construction. This runs only in dev mode (ngDevMode guard at _validatePositions).

Source

Thrown at src/cdk/overlay/position/connected-position.ts:108

/** The change event emitted by the strategy when a fallback position is used. */
export class ConnectedOverlayPositionChange {
  constructor(
    /** The position used as a result of this change. */
    public connectionPair: ConnectionPositionPair,
    /** @docs-private */
    public scrollableViewProperties: ScrollingVisibility,
  ) {}
}

/**
 * Validates whether a vertical position property matches the expected values.
 * @param property Name of the property being validated.
 * @param value Value of the property being validated.
 * @docs-private
 */
export function validateVerticalPosition(property: string, value: VerticalConnectionPos) {
  if (value !== 'top' && value !== 'bottom' && value !== 'center') {
    throw Error(
      `ConnectedPosition: Invalid ${property} "${value}". ` +
        `Expected "top", "bottom" or "center".`,
    );
  }
}

/**
 * Validates whether a horizontal position property matches the expected values.
 * @param property Name of the property being validated.
 * @param value Value of the property being validated.
 * @docs-private
 */
export function validateHorizontalPosition(property: string, value: HorizontalConnectionPos) {
  if (value !== 'start' && value !== 'end' && value !== 'center') {
    throw Error(
      `ConnectedPosition: Invalid ${property} "${value}". ` +
        `Expected "start", "end" or "center".`,
    );

View on GitHub (pinned to 0411926e7d)

Solutions

1. Fix the position object so originY/overlayY are exactly 'top', 'bottom', or 'center' (lowercase).
2. Type the positions array as ConnectedPosition[] so TypeScript catches invalid literals at compile time.
3. Validate any user-supplied/config-driven position values before passing them to the strategy.
4. If you meant a horizontal value, put it in originX/overlayX ('start','end','center') not originY/overlayY.

Example fix

// before
const pos = { originY: 'middle', overlayY: 'top', originX: 'start', overlayX: 'start' };
// after
const pos: ConnectedPosition = { originY: 'center', overlayY: 'top', originX: 'start', overlayX: 'start' };

const VERTICAL = new Set(['top', 'bottom', 'center']);
if (!VERTICAL.has(position.originY) || !VERTICAL.has(position.overlayY)) {
  throw new Error(`originY/overlayY must be top|bottom|center, got ${position.originY}/${position.overlayY}`);
}

type VerticalConnectionPos = 'top' | 'bottom' | 'center';
function isValidVertical(v: unknown): v is VerticalConnectionPos {
  return v === 'top' || v === 'bottom' || v === 'center';
}

try {
  overlayRef = overlay.create({ positionStrategy: overlay.position().flexibleConnectedTo(origin).withPositions(positions) });
} catch (e) {
  if ((e as Error).message.includes('Expected "top", "bottom" or "center"')) {
    console.error('Fix originY/overlayY values');
  } else { throw e; }
}

When it happens

Trigger: Calling flexibleConnectedTo(positions) with a position object where originY or overlayY is misspelled, e.g. 'Top', 'middle', or a variable computed at runtime that isn't a valid VerticalConnectionPos.

Common situations: Building positions arrays dynamically from config/JSON; typos like 'middel' or 'top-left' placed into originY; mixing up which field is vertical (originX/overlayX) vs horizontal.

Related errors

• ConnectedPosition: Invalid ${property} "${value}". Expected
• FlexibleConnectedPositionStrategy: At least one position is
• This position strategy is already attached to an overlay
• Scroll strategy has already been attached.
• Scroll strategy has already been attached.

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