is there a way to make a drag and drop board in Angular ? What I want to do is having a column on the right with a list of elements that you could drag in a div on the left, and they would get copied in the left box and be able to be moved freely (see image below).

So far, i already figured out how to do the list part, but the problem is the board part. The list is a div with the cdkDropList attribute, and the elements in it all have the cdkDrag tag to them.

What I wanted to do is that when the user would drag an element from the list to the left board, I would have intercepted the event that is emitted, and copied the element on the board. But the method I created is not triggered when this happens. I tried both onDragEnd and cdkDragEnded, without success. Maybe am I confused on which element should trigger the event, the box or the item ?

Also, 99% of examples on internet show how to do cdkDrop stuff only on lists. I'm almost wondering if Angular's own DragDropModule is the right tool for what I want to do.

Here is my item :

<div class="rfid-box"
     cdkDrag
     cdkDragEnded="dragEndedProcess()"
     cdkDragBoundary={{boundary_name}}>
    {{object_name}}
</div>

And here is my left box (board):

<div cdkDrop class="left-box">
        <dragging-box object_name="Télécommande" boundary_name=".left-box"></dragging-box>
</div>

As you can see, for now, the "Télécommande" object is manually created, but eventually all elements would be created by dragging from the list on the right.