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 {
  
}

Answer 1

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

Answer 2

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)

Answer 3

import this in your app module

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

and re run the app.

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.

Answer 5

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).