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>

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

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

Answer 2

import this in your app module

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

and re run the app.

Answer 3

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.