Best approach to create recursive treeview dynamically from data API

Question

I\'m learning Angular 2, trying to build an expandable tree-view from a (potentially very large) third-party API. The API has an underlying structure like this:

Answer 1

in Angular2 you can render directives recursively. This makes rendering the tree very easy. I've modified your Plunker a little bit just to show the point. It's not the ideal implementation but it works as expected :).

Example:

@Component({
    selector: 'tree-view',
    template: `
        <div *ngFor="#dir of dirs">
            <tree-view [dirs]="dir.dirs"></tree-view>
        <div>
    `,
    directives: [TreeView]
})
export class TreeView {
    @Input() 
    private dirs: Array<Directory>;
}

I hope you will like it.

Cheers!