Migrating angular-ui-tree to modern Angular
angular-ui-tree rendered nested lists that users could reorder and move between levels by dragging. It is tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| CDK Tree + CDK Drag and Drop | First-party building blocks; the tree has no built-in drag and drop, so moving nodes between levels needs code of your own. |
| PrimeNG Tree | When you want drag and drop of nodes ready-made. |
| Angular Material tree | When you only display and expand a hierarchy, without reordering. |
How to migrate it
- Decide what users really do with each tree: only expand and collapse, reorder within a level, or move nodes between levels.
- Keep the tree as plain data (id, parent id, order) in a service; the component renders it and emits move events.
- Implement the drop rules in one function: which node can go where, and the maximum depth.
Watch out. Nested drag and drop is the expensive part. Test dropping into collapsed nodes, into empty nodes and onto a node's own descendants before you estimate the rest.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn