{"record":{"id":"f0891daa87456c7a","repo":"angular/components","slug":"cdkdroplist-could-not-find-an-element-container-ma","errorCode":null,"errorMessage":"CdkDropList could not find an element container matching the selector \"${this.elementContainerSelector}\"","messagePattern":"CdkDropList could not find an element container matching the selector \"(.+?)\"","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/cdk/drag-drop/directives/drop-list.ts","lineNumber":342,"sourceCode":"\n      // Note that we resolve the scrollable parents here so that we delay the resolution\n      // as long as possible, ensuring that the element is in its final place in the DOM.\n      if (!this._scrollableParentsResolved) {\n        const scrollableParents = this._scrollDispatcher\n          .getAncestorScrollContainers(this.element)\n          .map(scrollable => scrollable.getElementRef().nativeElement);\n        this._dropListRef.withScrollableParents(scrollableParents);\n\n        // Only do this once since it involves traversing the DOM and the parents\n        // shouldn't be able to change without the drop list being destroyed.\n        this._scrollableParentsResolved = true;\n      }\n\n      if (this.elementContainerSelector) {\n        const container = this.element.nativeElement.querySelector(this.elementContainerSelector);\n\n        if (!container && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n          throw new Error(\n            `CdkDropList could not find an element container matching the selector \"${this.elementContainerSelector}\"`,\n          );\n        }\n\n        ref.withElementContainer(container as HTMLElement);\n      }\n\n      ref.disabled = this.disabled;\n      ref.lockAxis = this.lockAxis;\n      ref.sortingDisabled = this.sortingDisabled;\n      ref.autoScrollDisabled = this.autoScrollDisabled;\n      ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);\n      ref.hasAnchor = this.hasAnchor;\n      ref\n        .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))\n        .withOrientation(this.orientation);\n    });\n  }","sourceCodeStart":324,"sourceCodeEnd":360,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/drag-drop/directives/drop-list.ts#L324-L360","documentation":"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.","triggerScenarios":"Binding [elementContainerSelector]=\"'.rows'\" (or cdkDropListElementContainer) on a cdkDropList whose DOM does not contain any element matching the selector at initialization time.","commonSituations":"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.","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)."],"exampleFix":"// before\n<div cdkDropList elementContainerSelector=\".item-wrap\">\n  <div *ngIf=\"ready\" class=\"item-wrap\">...</div>\n</div>\n// after\n<div cdkDropList elementContainerSelector=\".item-wrap\">\n  <div class=\"item-wrap\">...</div>\n</div>","handlingStrategy":"validation","validationCode":"const host = dropList._element.nativeElement;\nif (!host.querySelector('.item-wrap')) {\n  throw new Error('elementContainerSelector .item-wrap matches nothing inside the drop list');\n}","typeGuard":null,"tryCatchPattern":"try {\n  // component init with elementContainerSelector\n} catch (e) {\n  if ((e as Error).message.includes('could not find an element container')) {\n    console.error('Selector mismatch: ensure the container exists inside cdkDropList');\n  } else throw e;\n}","preventionTips":["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."],"tags":["angular","cdk","drag-drop","drop-list","selector"],"backgroundTag":"selector-no-match","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}