0

I am trying to split a big components into smaller ones. I've implemented there drag&drop functionality from Angular Material which connects two lists by hash marks. The problem is that now list which is dragable and list where items can be droped are separated becuase each one in in different component. My question is how to connect these two lists to get functionality again? I am not asking about any code implementation, but only about passing values to the hash element references between this two components. enter image description here

Code: Child Component 1 ([cdkDropListConnectedTo]="[doneList]"):

    <div class="msgList"
    cdkDropList #todoList="cdkDropList" [cdkDropListData]="messagesArray" [cdkDropListConnectedTo]="[doneList]"
    infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"(scrolled)="onScroll()" [scrollWindow]="false">

Child Component 2 ([cdkDropListConnectedTo]="[todoList]"):

     <a mat-list-item class="navItem" (click)="onContainerChange(enumMessageContainer.DELETED_MESSAGES)"
           cdkDropList #doneList="cdkDropList"
           [cdkDropListData]="messagesMovedToDelete" [cdkDropListConnectedTo]="[todoList]"
           (cdkDropListDropped)="dropAndDelete($event)">
            <mat-icon>delete</mat-icon>
            <span class="nav-caption">Trash</span>
        </a>
Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
Mateusz Gebroski
  • 1,274
  • 3
  • 26
  • 57
  • 1
    This question has probably [already been answered over here](https://stackoverflow.com/questions/53413175/how-to-use-angular7-angular-material-drag-drop-between-two-components). – Jens Habegger May 12 '19 at 17:34
  • Possible duplicate of [How to use Angular7 (angular material) drag drop between two components](https://stackoverflow.com/questions/53413175/how-to-use-angular7-angular-material-drag-drop-between-two-components) – Jens Habegger May 12 '19 at 17:34

0 Answers0