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 xy 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

Answer 1

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.