Angular material cdk drag drop: Can't bind to 'cdkDragFreeDragPosition'

Question

I am using angular material drag and drop cdk (reference: https://material.angular.io/cdk/drag-drop/overview).

The drag - drop works fine, but when I try to preset its x-y co-ordinates using [cdkDragFreeDragPosition] it shows error:

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'. ("FreeDragPosition]="dragPosition" -->
<!-- [cdkDragFreeDragPosition]="{x:10, y:10}" -->

Here is my module:

import { DragDropModule } from '@angular/cdk/drag-drop';
...
@NgModule({
    imports: [
    ...
    DragDropModule
...

export class AppModule { }

and component.html

<div cdkDrag [cdkDragFreeDragPosition]="{x:10, y:10}">
   content goes here...
</div>

Could someone suggest me where I made mistake? Thanks in advance...

Update: my Angular version is 6 and @angular cdk is 7.3.7

can you provide a Stackblitz that can reproduce this issue ? — HDJEMAI
Hi @HDJEMAI@Alex, the dragable is working fine. The problem is when I setting its co-ordinates manually using cdkDragFreeDragPosition. I think it is the versions causing a problem here. I am using angular 6 and angular cdk is 7.3.7. — rb vishnu

TotallyNewb TotallyNewb · Accepted Answer · 2020-12-30T09:21:40

The error message is correct - there was no cdkDragFreeDragPosition in 7.3.7. It seems that it was first documented in 8.2.3 - haven't actually checked in the git repo, but they are usually pretty consistent with their docs. So you'll need to update to 8.2.3.

Preferably, you'll also want to keep CDK major version on par with your Angular version.

Angular material cdk drag drop: Can't bind to 'cdkDragFreeDragPosition'

1 Answers