To render flat data as a hierarchy you can use component recursion. Each node will render all its children, which will render the next level of children, etc.
Because there are multiple root nodes, start by having the container component render each top-level item:
get rootNodes(): TreeNode[] {
return this.nodes.filter(node => node.parent === '#');
}
<app-tree *ngFor="let node of rootNodes"
[nodes]="nodes"
[nodeId]="node.id">
</app-tree>
Then each of those components will render any child nodes using the same component. Because the data is flat, we pass all the list items to each tree component and let that component sort out which items to render.
@Component({
selector: 'app-tree',
...
})
export class TreeComponent {
@Input() nodes: TreeNode[];
@Input() nodeId: string;
get childNodes(): TreeNode[] {
return this.nodes.filter(node => node.parent === this.nodeId);
}
}
<!-- Render the item itself, e.g. using a mat-card -->
<h1>{{nodeId}}</h1>
<!-- Render each child -->
<app-tree *ngFor="let childNode of childNodes"
[nodes]="nodes"
[nodeId]="childNode.id">
</app-tree>
Representing the hierarchy is then a matter of styling, such as using padding to indent each level.
Also, if your data changes after the initial render you may want to use the *ngFor trackBy to reduce the required DOM changes.
Demo StackBlitz
