angular/components · error · Error

CdkDropList could not find an element container matching the

Error message

CdkDropList could not find an element container matching the selector "${this.elementContainerSelector}"

What it means

CdkDropList supports elementContainerSelector to render drag items inside an alternate inner container element. During input sync setup, the directive queries its host for that selector; if no element matches, dev mode throws because the drag-drop ref would have no valid container.

Source

Thrown at src/cdk/drag-drop/directives/drop-list.ts:342

      // Note that we resolve the scrollable parents here so that we delay the resolution
      // as long as possible, ensuring that the element is in its final place in the DOM.
      if (!this._scrollableParentsResolved) {
        const scrollableParents = this._scrollDispatcher
          .getAncestorScrollContainers(this.element)
          .map(scrollable => scrollable.getElementRef().nativeElement);
        this._dropListRef.withScrollableParents(scrollableParents);

        // Only do this once since it involves traversing the DOM and the parents
        // shouldn't be able to change without the drop list being destroyed.
        this._scrollableParentsResolved = true;
      }

      if (this.elementContainerSelector) {
        const container = this.element.nativeElement.querySelector(this.elementContainerSelector);

        if (!container && (typeof ngDevMode === 'undefined' || ngDevMode)) {
          throw new Error(
            `CdkDropList could not find an element container matching the selector "${this.elementContainerSelector}"`,
          );
        }

        ref.withElementContainer(container as HTMLElement);
      }

      ref.disabled = this.disabled;
      ref.lockAxis = this.lockAxis;
      ref.sortingDisabled = this.sortingDisabled;
      ref.autoScrollDisabled = this.autoScrollDisabled;
      ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);
      ref.hasAnchor = this.hasAnchor;
      ref
        .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
        .withOrientation(this.orientation);
    });
  }

View on GitHub (pinned to 0411926e7d)

Solutions

Ensure an element matching the selector exists inside the cdkDropList host before/at initialization (don't wrap it in *ngIf, or render it eagerly).
Fix the selector typo/renamed class.
Remove elementContainerSelector if you don't need an alternate container.
Keep items as direct children of the matched container (see related item-placement error).

Example fix

// before
<div cdkDropList elementContainerSelector=".item-wrap">
  <div *ngIf="ready" class="item-wrap">...</div>
</div>
// after
<div cdkDropList elementContainerSelector=".item-wrap">
  <div class="item-wrap">...</div>
</div>

Defensive patterns

Strategy: validation

Validate before calling

const host = dropList._element.nativeElement;
if (!host.querySelector('.item-wrap')) {
  throw new Error('elementContainerSelector .item-wrap matches nothing inside the drop list');
}

Try / catch

try {
  // component init with elementContainerSelector
} catch (e) {
  if ((e as Error).message.includes('could not find an element container')) {
    console.error('Selector mismatch: ensure the container exists inside cdkDropList');
  } else throw e;
}

Prevention

Keep the container element rendered unconditionally when the selector targets it.
Test selector strings against the rendered DOM (querySelector) before binding.
Avoid selectors that resolve outside the cdkDropList host.

When it happens

Trigger: Binding [elementContainerSelector]="'.rows'" (or cdkDropListElementContainer) on a cdkDropList whose DOM does not contain any element matching the selector at initialization time.

Common situations: Typo in the CSS selector; the container is rendered conditionally (*ngIf) so it doesn't exist when the directive initializes; selector points outside the drop list host; renamed class after a styling refactor.

Related errors

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