In Angular, how would you move a component in the dom?

Question

Started to learn Angular, so this might have a simple answer:)

Without getting to code specific. I'm looking for help, getting in the right direction.

Working on a little shoppinglist application. The point is, when you found something at the grocery store, you click on the item and it move down in a "found items region of the page" click and move below image

atm. the blue components are actually just buttons in the template, but could be anything really. They are instances of a "grocery component", that are nested within a "shopping list" component, build with an ngFor.

In my head it would make sense to work with a single array and filter on that. I've tried that, and it sort of works, but I can't get it to move once the initialization is done. so somehow when I click on a grocery component, I need to tell the shopping list component to move this down in the "grocery found" part of the dom. or vice versa if you want to move it back up.

Any hits or comments would be helpful.

Answer 1

CDK Drag Drop might be useful in your case

https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-connected-sorting

Answer 2

Have you tested "Dragula"? Here

You can do not only vertical drag&drop, but horizontal as well if you change the direction with the option:

direction:'horizontal'