CODEWITHSUNDEEP
angularangular-materialdrag-and-dropconsole.logangular-cdk
VishnuPrasad
VishnuPrasad

Reputation: 1078

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

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

Upvotes: 0

Views: 1193

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4820

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.

Upvotes: 1

Related Questions