Angular2 - recursive html without making 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 realize I can recursively call a component along with it's template in Angular2, but is there a way to recursively build HTML only? The logic seems like it would fit better with the parent component rather than with a series of child components.

Search for ngTemplateOutlet

Günter Zöchbauer
– Günter Zöchbauer

2016-12-12 21:54:32 +00:00
Commented Dec 12, 2016 at 21:54 — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 12, 2016 at 21:54

arniebradfo · Accepted Answer · 2017-05-07 20:33:48Z

24

There certainly is a html only solution in Angular:

<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's a gist.

answered May 7, 2017 at 20:33

arniebradfo

1,21214 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 - recursive html without making a new component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related