title: Error when using cdkDropListData in Angular gives me Can't bind to 'cdkDropListData' since it isn't a known property of 'div'
body: <pre><code>&lt;div
                        cdkDropList
                        #girlList=&quot;cdkDropList&quot;
                        [cdkDropListData]=&quot;girls&quot;
                        [cdkDropListConnectedTo]=&quot;[convaList]&quot;
                        class=&quot;example-list&quot;
                        (cdkDropListDropped)=&quot;drop($event)&quot;&gt;&lt;div class=&quot;card color-challenging mb-2&quot; *ngFor=&quot;let girls_data of girls&quot; cdkDrag&gt;
                        &lt;div class=&quot;card-body p-2 justify-content-between align-items-center d-flex&quot;&gt;
                          &lt;span class=&quot;reading-grade font-weight-bold&quot;&gt;{{girls_data.id}}&lt;/span&gt;
                          &lt;div class=&quot;student-grade flex flex-grow-1&quot;&gt;
                            &lt;p class=&quot;justify-content-between align-items-center d-flex&quot;&gt;
                              &lt;span class=&quot;student-name&quot;&gt;{{girls_data.firstName}}{{girls_data.lastName}}&lt;/span&gt;
                              &lt;span&gt;{{girls_data.gender}}&lt;/span&gt;
                            &lt;/p&gt;
                            &lt;p class=&quot;justify-content-between align-items-center d-flex&quot;&gt;
                              &lt;span&gt;{{girls_data.currentAcademicYear}}&lt;/span&gt;
                              &lt;span&gt;&lt;i class=&quot;fa fa-ban&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; &lt;i class=&quot;fa fa-paperclip&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                            &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;span class=&quot;behavior-grade text-right font-weight-bold&quot;&gt;{{girls_data.inGrade}}&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>When using [cdkDropListData] here gives me error on console that Can't bind to 'cdkDropListData' since it isn't a known property of 'div'.</p>
  <p><strong>I am new to angular so please avoid newbie behaviour</strong></p>
  <p>I already imported the CdkDragDrop in module.ts</p>
  <p>This is the Component file.</p>
  <pre><code>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&lt;string[]&gt;){
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
  </code></pre>
  <p>Here is the module file.</p>
  <pre><code>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 {
    
  }
  </code></pre>