title: Angular Material drag and drop empty list not working
body: <p>I'm trying to implement 4 drag and drop areas, plan 1 year 1 column, plan 1 year 2 column, plan 1 year 3 column, plan 1 year 4 column, modlist1, 1 with a non-empty array (modlist1), the others with empty arrays each. However I am getting this error:</p>
  <blockquote>
  <p>error TS2345: Argument of type 'CdkDragDrop&lt;never[], any&gt;' is not assignable to parameter of type 'CdkDragDrop&lt;string[], string[]&gt;'.
  The types of 'container.dropped.emit' are incompatible between these types.
  Type '(value?: CdkDragDrop&lt;never[], any&gt; | undefined) =&gt; void' is not assignable to type '(value?: CdkDragDrop&lt;string[], any&gt; | undefined) =&gt; void'.
  Types of parameters 'value' and 'value' are incompatible.
  Type 'CdkDragDrop&lt;string[], any&gt; | undefined' is not assignable to type 'CdkDragDrop&lt;never[], any&gt; | undefined'.
  Type 'CdkDragDrop&lt;string[], any&gt;' is not assignable to type 'CdkDragDrop&lt;never[], any&gt;'.
  The types of 'container.data' are incompatible between these types.
  Type 'string[]' is not assignable to type 'never[]'.</p>
  </blockquote>
  <blockquote>
  <p>207                       (cdkDropListDropped)=&quot;onDrop($event)&quot;</p>
  </blockquote>
  <p>Here are is my html code:</p>
  
                
                  
  <pre><code>              &lt;!-----------------------------plan 1 year 1 column--------------------------------------------&gt;
                  &lt;div class=&quot;col droppable example-list&quot; cdkDropList
                    #P1Y1=&quot;cdkDropList&quot;
                    [cdkDropListData]=&quot;addedP1Y1&quot;
                    (cdkDropListDropped)=&quot;onDrop($event)&quot;
                    [cdkDropListConnectedTo]=&quot;[modlist1, P1Y2, P1Y3, P1Y4]&quot;
                    id = &quot;1&quot;&gt;
                    &lt;h2&gt;Year 1&lt;/h2&gt;
                    &lt;div class= &quot;example-box&quot; *ngFor=&quot;let item of addedP1Y1&quot; [cdkDragData]=&quot;item&quot; cdkDrag&gt;
                      {{item}}
                    &lt;/div&gt;   
                  &lt;/div&gt;
                  
                  &lt;!-----------------------------plan 1 year 2 column--------------------------------------------&gt;
                  &lt;div class=&quot;col droppable example-list&quot; cdkDropList
                    #P1Y2=&quot;cdkDropList&quot;
                    [cdkDropListData]=&quot;addedP1Y2&quot;
                    (cdkDropListDropped)=&quot;onDrop($event)&quot;
                    [cdkDropListConnectedTo]=&quot;[modlist1, P1Y1, P1Y3, P1Y4]&quot;
                    id = &quot;1&quot;&gt;
                    &lt;h2&gt;Year 2&lt;/h2&gt;
                    &lt;div class= &quot;example-box&quot; *ngFor=&quot;let item of addedP1Y2&quot; [cdkDragData]=&quot;item&quot; cdkDrag&gt;
                      {{item}}
                    &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;!-----------------------------plan 1 year 3 column--------------------------------------------&gt;
                  &lt;div class=&quot;col droppable example-list&quot; cdkDropList
                    #P1Y3=&quot;cdkDropList&quot;
                    [cdkDropListData]=&quot;addedP1Y3&quot;
                    (cdkDropListDropped)=&quot;onDrop($event)&quot;
                    [cdkDropListConnectedTo]=&quot;[modlist1, P1Y2, P1Y1, P1Y4]&quot;
                    id = &quot;1&quot;&gt;
                    &lt;h2&gt;Year 3&lt;/h2&gt;
                    &lt;div class= &quot;example-box&quot; *ngFor=&quot;let item of addedP1Y3&quot; [cdkDragData]=&quot;item&quot; cdkDrag&gt;
                      {{item}}
                    &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;!-----------------------------plan 1 year 4 column--------------------------------------------&gt;
                  &lt;div class=&quot;col droppable example-list&quot; cdkDropList
                    #P1Y4=&quot;cdkDropList&quot;
                    [cdkDropListData]=&quot;addedP1Y4&quot;
                    (cdkDropListDropped)=&quot;onDrop($event)&quot;
                    [cdkDropListConnectedTo]=&quot;[modlist1, P1Y2, P1Y3, P1Y1]&quot;
                    id = &quot;1&quot;&gt;
                    &lt;h2&gt;Year 4&lt;/h2&gt;
                    &lt;div class= &quot;example-box&quot; *ngFor=&quot;let item of addedP1Y4&quot; [cdkDragData]=&quot;item&quot; cdkDrag&gt;
                      {{item}}
                    &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;!----------plan1 modlist-----------------------------------------------------------------&gt;
            &lt;div class=&quot;card&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                &lt;h4 class=&quot;card-title&quot;&gt;Mod Lists&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body example-list&quot;
                    cdkDropList
                    #modlist1=&quot;cdkDropList&quot;
                    [cdkDropListData]=&quot;ModList1&quot;
                    (cdkDropListDropped)=&quot;onDrop($event)&quot;
                    [cdkDropListConnectedTo]=&quot;[modlist1, P1Y1, P1Y2, P1Y3, P1Y4]&quot;
                    id = &quot;1&quot;&gt;
                  &lt;div class=&quot;example-box&quot; *ngFor=&quot;let item of ModList1&quot; [cdkDragData]=&quot;item&quot; cdkDrag&gt;
                    {{item}}
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  <p>Here is my ts code:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {CdkDrag, CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
  import { disableDebugTools } from '@angular/platform-browser';
  @Component({
    selector: 'app-module',
    templateUrl: './module.component.html',
    styleUrls: ['./module.component.css']
  })
  export class ModuleComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    ModList1 = [
      'CZ2001',
      'CZ2002',
      'CZ2003',
      'CZ2004',
      'CZ2005',
      'CZ2006',
      'CZ2007',
      'CZ3002'
    ];
   
    addedP1Y1 =[
      
    ];
    
    addedP1Y2 =[
      
    ];
  
    addedP1Y3 =[
      
    ];
  
    addedP1Y4 =[
       
    ];
       onDrop(event: CdkDragDrop&lt;string[]&gt;) {
      if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else {
          transferArrayItem(event.previousContainer.data,
                            event.container.data,
                            event.previousIndex,
                            event.currentIndex);
          return;                  
        }
      }
    } 
  </code></pre>