Drag And Drop KanBan slow

I am using ngx-drag-drop

I am doing a sort of kanban board, and want to drag element from a point a to a point b

Board.component

export class KanbanBoardComponent implements OnInit  {


  //------------------------------------------------------
  //                    PARAMETERS
  //------------------------------------------------------
  private columns: boardColumn[];

  //------------------------------------------------------
  //                    INITS
  //------------------------------------------------------
  constructor() {}

  ngOnInit() {
    this.setMockData();
  }

  //------------------------------------------------------
  //                    METHODS
  //------------------------------------------------------
  // temporary
  setMockData(): void {
    const lists: boardColumn[] = [
      {
        name: 'To Do',
        cards: []
      },
      {
        name: 'Doing',
        cards: []
      },
      {
        name: 'Done',
        cards: []
      }
    ]
    this.columns = lists;
  }
}

board.template

<div class="kanban-board-container">
    <kanban-column-component *ngFor="let column of columns" [column]="column"></kanban-column-component>
</div>

this is the column.component

export class KanbanColumnComponent implements OnInit {

  //------------------------------------------------------
  //                INPUTS
  //------------------------------------------------------
  @Input() column: boardColumn;

  //------------------------------------------------------
  //                PARAMETERS
  //------------------------------------------------------
  cards: Map<string, boardCard>;

  //------------------------------------------------------
  //                INITS
  //------------------------------------------------------
  constructor() {}

  ngOnInit() {
    this.setMockData();
  }

  //------------------------------------------------------
  //               METHODS
  //------------------------------------------------------
  // temporary
  setMockData(): void {
    this.cards = new Map<string, boardCard>();
    const lists: boardCard[] = [
      {
        id:Math.random().toString(36).substring(7),
        name: 'name1 ',
        description: 'desc1 ',
        priority : [1, 2]
      },
      {
        id:Math.random().toString(36).substring(7),
        name: 'name2 ',
        description: 'desc2 ',
        priority : [5]
      },
      {
        id:Math.random().toString(36).substring(7),
        name: 'name3 ',
        description: 'desc3 ',
        priority : []
      }
    ]

    lists.forEach(card => {
      this.cards.set(card.id, card);
    })
  }

  insertCardAtIndex(index: Number, key: string, value:boardCard, map:Map<string, boardCard>): Map<string, boardCard> {
    let clonedMap = new Map(map);
    let tmpMap = new Map<string, boardCard>();
    let tmpIndex = 0;

    for (let entry of Array.from(clonedMap.entries())) {
      if(tmpIndex === index){
        tmpMap.set(key, value);
      }
      tmpMap.set(entry[0], entry[1]);
      tmpIndex++;
    }

    return tmpMap;
  }

  getKeys(map){
    return Array.from(map.values());
  }

  //------------------------------------------------------
  //                    EVENTS
  //------------------------------------------------------
  onDragStart(event:DragEvent, card:boardCard) {
    console.log("drag started On item ", card.name, " Hover element ", this.column.name, JSON.stringify(event, null, 2));
  }

  onDragEnd(event:DragEvent, card:boardCard) {
    console.log("drag ended On item ", card.name, " Hover element ", this.column.name, JSON.stringify(event, null, 2));
    this.cards.delete(card.id);
  }

  onDragCanceled(event:DragEvent, card:boardCard) {
    console.log("drag cancel On item ", card.name, " Hover element ", this.column.name, JSON.stringify(event, null, 2));
  }

  onDragover(event:DndDropEvent) {
    console.log("drag Hover element ", this.column.name, JSON.stringify(event, null, 2));
  }

  onDrop(event:DndDropEvent) {
    console.log("drop Hover element ", this.column.name, JSON.stringify(event, null, 2));
    this.cards = this.insertCardAtIndex(event.index, event.data.id, event.data, this.cards)
  }
}

and the column.template

<div class="kanban-column-container">
    <p class="title"><strong>{{column.name}}</strong></p>
    <button mat-button (click)="addCard();">Add Card</button>
    <div class="list"  
    dndDropzone
    (dndDragover)="onDragover($event)"
    (dndDrop)="onDrop($event)">
        <!-- PLACEHOLDER for drag & drop. Removed on DOM LOAD AUTOMATICALLY -->
        <div class="card-placeholder" dndPlaceholderRef>
            placeholder
        </div> 

        <div *ngFor="let card of getKeys(cards)"
        [dndDraggable]="card"
        (dndStart)="onDragStart($event, card)"
        (dndCanceled)="onDragCanceled($event, card)"
        (dndEnd)="onDragEnd($event, card)"
        [hidden]="card.hidden">
            <kanban-card-component [card]="card"></kanban-card-component>
        </div>
    </div> 
</div>

But the problem is, the placeholder is VERY slow for some reason. It freeze and it need around a second to update the position while dropping.

I do believe I am doing something wrong because in the demo everything works smoothly...

Maybe is my ngFor that are not correct, I do not have power over the placeholder, it's updated automatically from ngx-drap-drop, so I do not know exactly what is making everything freeze.

I wanted to do a plunker or demo, but I do not know how to import sepcific npm value in it