Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Santiago Gelvez
2 answers
Answer question

0

CDK Drag Drop might be useful in your case

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

about 4 years ago · Santiago Gelvez Report

0

Have you tested "Dragula"? Here

enter image description here

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

direction:'horizontal'
about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!