Error when using cdkDropListData in Angular gives me Can't bind to 'cdkDropListData' since it isn't a known property of 'div'

Question

<div cdkDropList #girlList="cdkDropList" [cdkDropListData]="girls" [cdkDropListConnectedTo]="[convaList]"
    class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag>
        <div class="card-body p-2 justify-content-between align-items-center d-flex">
            <span class="reading-grade font-weight-bold">{{girls_data.id}}</span>
            <div class="student-grade flex flex-grow-1">
                <p class="justify-content-between align-items-center d-flex">
                    <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span>
                    <span>{{girls_data.gender}}</span>
                </p>
                <p class="justify-content-between align-items-center d-flex">
                    <span>{{girls_data.currentAcademicYear}}</span>
                    <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip"
                            aria-hidden="true"></i></span>
                </p>
            </div>
            <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span>
        </div>
    </div>
</div>

When using [cdkDropListData] here gives me error on console that Can't bind to 'cdkDropListData' since it isn't a known property of 'div'.

I am new to angular so please avoid newbie behaviour

I already imported the CdkDragDrop in module.ts

This is the Component file.

import {Component, NgModule} from '@angular/core';
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import {CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';


@Component({
  selector: 'student-selector',
  templateUrl: 'studentSelector.component.html',
  styleUrls: ['./studentSelector.component.css']
})

export class StudentSelector {
  boys =  [];
  girls = [];
  constructor(private dataModel: StudentModel) {
    this.boys = dataModel.getStudents();
    this.girls = dataModel.getStudents();

  }
  get students(): Student[] {
    return this.dataModel.getStudents();
  }
  conva = [];
  
  drop(event : CdkDragDrop<string[]>){
    transferArrayItem(event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex);
  }
}

Here is the module file.

import {NgModule} from '@angular/core';
import { StudentModel } from './studentRepository.model';
import { SimpleDataSource } from './datasource.model';
import {DragDropModule} from '@angular/cdk/drag-drop';


@NgModule({
  providers: [StudentModel,SimpleDataSource],
  imports : [DragDropModule]
})

export class ModelModule {
  
}

Inequitable

Did you import CdkDragDrop or DragDropModule in the module.ts? (Second one is correct and the first one has to be imported in the Component.) – Naumann

I recommend to check the docs to see which imports you need whenever you import something new. For Angular Material you can see the the respective module import in the API tab and the other imports in the examples: material.angular.io/cdk/drag-drop/overview – Naumann

yes i have imported the CdkDragDrop in component and DragDropModule in the module.ts file – Inequitable

Please add how you did those imports because the error you get is generally connected to missing/wrong imports (or exports something is declared/imported in a submodule). – Naumann

@GunnarB. ok let me add those imports files. – Inequitable

@GunnarB. I have added the files now. – Inequitable

Ok, you only want the import for the DragDropModule in ModelModule, not in StudentSelector. That one should only import CdkDragDrop (+ the two relocation functions). – Naumann

@GunnarB. i am still confused where the problem is. – Inequitable

Also it seems to me that StudentSelector is not part of ModelModule since it is not in the declarations of it. – Naumann

Ok i got your point. Thank you @GunnarB. – Inequitable

Answer 1

The imports should be like this:

import {NgModule} from '@angular/core';
import { StudentModel } from './studentRepository.model';
import { SimpleDataSource } from './datasource.model';
import {DragDropModule} from '@angular/cdk/drag-drop';


@NgModule({
  providers: [StudentModel,SimpleDataSource],
  imports : [DragDropModule]
})

export class ModelModule {
  
}

and (see notes in the code)

import {Component} from '@angular/core';    <= NgModule removed
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';     <= DragDropModule removed


@Component({
  selector: 'student-selector',
  templateUrl: 'studentSelector.component.html',
  styleUrls: ['./studentSelector.component.css']
})

export class StudentSelector {
  ...
}

Generally:
xxxModule should only ever be imported on module level, not on component level.

Also, as I mentioned in the comments:
It looks like your StudentSelector is in a different module than your ModelModule (at least it is not part of the declarations you provided). A component can only be used in the module that declares it (declarations-list) OR that imports another module which in return declares the component and exports it (exports-list).

Naumann

Answer 2

import this in your app module

import { DragDropModule} from '@angular/cdk/drag-drop';

and re run the app.

Boehmenist

Answer 3

1. Most probably the issue can be not importing the correct module.

• import { DragDropModule} from '@angular/cdk/drag-drop';

2. Still, if someone is facing this issue then it means you have not declared your component in any of your modules (Ex: App.module.ts) Because this property requires module declaration.

• (Ex: If someone opens a component using ComponentFactoryResolver, then it does not require to declare in app.module but to use '[cdkDropListData]', you need to declare it app.module)

Chorister

Yes your StudentSelector does not appear in the declarations array of your ModelModule – Sheer

Answer 4

This is not very technical solution but there are few things which I've faced.

1. Clear the cache before load the page (If you are not clearing it usually). Sometimes it misses to fetch the data to the variable.

2. Fix the run time bugs in the current page (may be in the another block but in the same page).

But I've faced the first issue. when I clear the cache it worked.

Margarettemargarida

Answer 5

make sure that you import cdkDropListData in that module where you have imported the same component among its declarations.

To put it simply, the component in which you want to use the cdkDropListData module must be imported in a module.

Now the corresponding component in the declarations section and cdkDropListData in the imports section of the same module

If your project uses, for example, shared.module.ts You must import and export cdkDropListData in it

And now you have to import the shared module into the same module in which the corresponding component is imported

Bennink