By utilizing this particular gist, I am able to effortlessly showcase a tree structure.
https://i.sstatic.net/yUNyw.png
The aspect I aim to alter is how the first level is presented, as illustrated below:
https://i.sstatic.net/Wg7JG.png
Despite attempting various adjustments, I continuously encounter a call stack limit exceeding issue. Here's an example of this scenario:
<h1>Angular 2 Recursive List</h1>
<ul>
<li *ngFor="let item of list">
{{item.title}} - LEVEL 0
<ul *ngIf="item.children.length > 0">
<ng-template #recursiveList let-list>
<li *ngFor="let child of item.children">
{{child.title}}
<ul *ngIf="child.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: child.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: child }"></ng-container>
</ul>
</li>
</ul>
Error:
preview-d2335ca5bdb955611c1cb.js:1 ERROR RangeError: Maximum call stack size exceeded
at NgForOf.ngDoCheck (ng_for_of.ts:212)
at checkAndUpdateDirectiveInline (provider.ts:215)
at checkAndUpdateNodeInline (view.ts:429)
at checkAndUpdateNode (view.ts:389)
at debugCheckAndUpdateNode (services.ts:431)
at debugCheckDirectivesFn (services.ts:392)
at Object.eval [as updateDirectives] (AppComponent.html:9)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:386)
at checkAndUpdateView (view.ts:359)
at callViewAction (view.ts:615)