Angular Tree Component In 6 Lines Of Code

Ok there are more than 6 lines needed to create and style the tree component but the template, where the recursion happens is just six lines in length.

<ul class="child">
<li *ngFor="let child of children">
{{child.name}}
<my-tree *ngIf="child.children" [children]="child.children"></my-tree>
</li>
</ul>
view raw tree.html hosted with ❤ by GitHub

We need our data in format where deepening is done with .children property then we just pass them in [children] @Input.

<my-tree [children]="tree"></my-tree>
view raw app.html hosted with ❤ by GitHub

Whole plunker with an example is available here:

… easy peasy lemon squeezy

Buy me a coffeeOut of coffee 😱, please help!