10
<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 {
  
}
sahil saini
  • 129
  • 1
  • 1
  • 7
  • 1
    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.) – Gunnar B. Aug 05 '20 at 06:43
  • 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: https://material.angular.io/cdk/drag-drop/overview – Gunnar B. Aug 05 '20 at 06:46
  • yes i have imported the CdkDragDrop in component and DragDropModule in the module.ts file – sahil saini Aug 05 '20 at 06:47
  • 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). – Gunnar B. Aug 05 '20 at 06:52
  • @GunnarB. ok let me add those imports files. – sahil saini Aug 05 '20 at 06:57
  • @GunnarB. I have added the files now. – sahil saini Aug 05 '20 at 07:02
  • Ok, you only want the import for the `DragDropModule` in `ModelModule`, not in `StudentSelector`. That one should only import `CdkDragDrop` (+ the two relocation functions). – Gunnar B. Aug 05 '20 at 07:08
  • @GunnarB. i am still confused where the problem is. – sahil saini Aug 05 '20 at 07:11
  • Also it seems to me that `StudentSelector` is not part of `ModelModule` since it is not in the `declarations` of it. – Gunnar B. Aug 05 '20 at 07:11
  • Ok i got your point. Thank you @GunnarB. – sahil saini Aug 05 '20 at 07:14

4 Answers4

7

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

Gunnar B.
  • 2,879
  • 2
  • 11
  • 17
2

import this in your app module

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

and re run the app.

Ayesha
  • 251
  • 2
  • 7
2
  1. Most probably the issue can be not importing the correct module.
  • import { DragDropModule} from '@angular/cdk/drag-drop';
  1. 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)
Jens
  • 5,767
  • 5
  • 54
  • 69
Sunil goyal
  • 21
  • 2
0

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.

Joseph M
  • 159
  • 1
  • 10