angular 5 recursive template ERROR RangeError: Maximum call stack size exceeded in

Question

hello everyone i am using angular recursive template for recursive representation of array.

its code is as below i have been following

https://plnkr.co/edit/CIGAA5BmiKU4hCMsOaIB?p=preview this link.

my array is basically dynamic

<ul>
        <ng-template #recursiveList let-list>
            <li *ngFor="let item of AlldepartmentList; let index = index">
                <span (click)="getDepartment(item.id)"> {{item.department_name}} </span>

            <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 object that I am passing to the html view.

[{
"id": 3,
"department_name": "new",
"children": [{
    "id": 4,
    "department_name": "new",
    "children": []
}, {
    "id": 5,
    "department_name": "new2",
    "children": []
}, {
    "id": 7,
    "department_name": "new2123",
    "children": []
}, {
    "id": 8,
    "department_name": "new21",
    "children": []
}, {
    "id": 11,
    "department_name": "test",
    "children": []
}]
},
  {
  "id": 6,
   "department_name": "new2",
  "children": []
   }, {
   "id": 2,
   "department_name": "test",
   "children": []
   }]

my dependency versions are here

Angular CLI: 1.5.5
Node: 7.10.1
OS: linux x64
Angular: 5.2.2
animations, common, compiler, compiler-cli, core, forms
http, language-service, platform-browser
platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.8.1

I am getting this error. most of solutions for this error is not on any perfect logic base.

correct me if somewhere i am wrong or its just a version problem.

VM42212 CostcentersComponent.ngfactory.js:573 ERROR RangeError: Maximum call stack size exceeded
   at Object.debugUpdateDirectives [as updateDirectives] (VM41902 core.js:14852)
at checkAndUpdateView (VM41902 core.js:13999)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)
at checkAndUpdateView (VM41902 core.js:14000)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)
at checkAndUpdateView (VM41902 core.js:14000)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)

Answer 1

Your problem is that you're iterating over AllDepartmentList instead of the local variable list inside your ng-template.

You have to change the ngForOf-directive from:

*ngFor="let item of AlldepartmentList; let index = index"

to:

*ngFor="let item of list; let index = index"

Here's a fixed version of your code: stackblitz