Recursive html without creating a new component?

Question

In angular 1, I was able to do something like:

<script type="text/ng-template" id="commentView.html"> <div> <div style="float: left; position: absolute;" ng-style="comment.displayPercent"> </div> </script> <script type="text/ng-template" id="commentReplies.html"> <div> <div class="commentChildBoxStyle" ng-hide="comment.hideComment"> <div style="min-width: 250px;"> <div ng-repeat="comment in comment.replies" ng-include="'commentReplies.html'"></div> </div> </div> </div> </script> 

I understand that I can recursively call a component with it in an Angular2 template, but is there a way to recursively build HTML only? The logic seems to fit better with the parent component, rather than with a number of child components.

Answer 1

In Angular, there is only an html solution:

 <h1>Angular 2 Recursive List</h1> <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list"> {{item.title}} <ul *ngIf="item.children.length > 0"> <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container> </ul> </li> </ng-template> <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container> </ul> 

Here is the gist .