{"record":{"id":"5b51747c27f9177c","repo":"angular/components","slug":"cdkdroplist-could-not-find-connected-drop-list-wit","errorCode":null,"errorMessage":"CdkDropList could not find connected drop list with id \"${drop}\"","messagePattern":"CdkDropList could not find connected drop list with id \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/cdk/drag-drop/directives/drop-list.ts","lineNumber":308,"sourceCode":"    this._destroyed.next();\n    this._destroyed.complete();\n  }\n\n  /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */\n  private _setupInputSyncSubscription(ref: DropListRef<CdkDropList>) {\n    if (this._dir) {\n      this._dir.change\n        .pipe(startWith(this._dir.value), takeUntil(this._destroyed))\n        .subscribe(value => ref.withDirection(value));\n    }\n\n    ref.beforeStarted.subscribe(() => {\n      const siblings = coerceArray(this.connectedTo).map(drop => {\n        if (typeof drop === 'string') {\n          const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);\n\n          if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n            console.warn(`CdkDropList could not find connected drop list with id \"${drop}\"`);\n          }\n\n          return correspondingDropList!;\n        }\n\n        return drop;\n      });\n\n      if (this._group) {\n        this._group._items.forEach(drop => {\n          if (siblings.indexOf(drop) === -1) {\n            siblings.push(drop);\n          }\n        });\n      }\n\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.","sourceCodeStart":290,"sourceCodeEnd":326,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/drag-drop/directives/drop-list.ts#L290-L326","documentation":"CdkDropList's connectedTo input accepts either CdkDropList references or string ids. When resolving string ids at the start of a drag sequence, if no registered drop list has a matching id, the directive warns that the connected list could not be found (the reference is then treated as undefined).","triggerScenarios":"Setting [connectedTo]=\"['someId']\" (or cdkDropListConnectedTo) where 'someId' does not match the id of any rendered CdkDropList when ref.beforeStarted fires during setupInputSyncSubscription in the constructor.","commonSituations":"Typo in the id string; the target drop list is rendered conditionally (*ngIf) or lazily and isn't registered yet; connecting to a list in a different injection context that never registers; using id binding before the id input is applied.","solutions":["Verify the id string matches the target list's id exactly: <div cdkDropList id=\"todo\">...</div>","Ensure the connected drop list is rendered (not behind *ngIf that is false) when dragging can start","Pass CdkDropList component/template references via #ref instead of string ids to avoid id-resolution issues","Fix typos and ensure ids are unique and stable"],"exampleFix":"// before\n<div cdkDropList [connectedTo]=\"['done-lst']\">…</div>\n// after\n<div cdkDropList [connectedTo]=\"['done-list']\">…</div>","handlingStrategy":"validation","validationCode":"const ids = ['todo', 'done'];\nconst registered = new Set(document.querySelectorAll('cdk-drop-list, [cdkDropList]'));\n// or at runtime before drag:\nids.forEach(id => {\n  if (!CdkDropList._dropLists?.some(l => l.id === id)) console.warn(`No drop list with id \"${id}\"`);\n});","typeGuard":"function dropListExists(id: string): boolean {\n  return CdkDropList._dropLists.some(list => list.id === id);\n}","tryCatchPattern":null,"preventionTips":["Keep connectedTo ids in a constant array shared with the template ids","Avoid *ngIf on drop lists that participate in connectedTo","Prefer template-reference variables over string ids","Ensure ids are unique across the app"],"tags":["drag-drop","cdkdroplist","id-lookup","angular-cdk"],"backgroundTag":"referenced-id-not-found","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}