title: angular 5 recursive template ERROR RangeError: Maximum call stack size exceeded in
body: <p>hello everyone i am using angular recursive template for recursive representation of array.</p>
  
  <p>its code is as below i have been following </p>
  
  <p><a href="https://plnkr.co/edit/CIGAA5BmiKU4hCMsOaIB?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/CIGAA5BmiKU4hCMsOaIB?p=preview</a> this link.</p>
  
  <p>my array is basically dynamic </p>
  
  <pre><code>&lt;ul&gt;
          &lt;ng-template #recursiveList let-list&gt;
              &lt;li *ngFor="let item of AlldepartmentList; let index = index"&gt;
                  &lt;span (click)="getDepartment(item.id)"&gt; {{item.department_name}} &lt;/span&gt;
  
              &lt;ul *ngIf="item.children.length &gt; 0"&gt;
                  &lt;ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"&gt;&lt;/ng-container&gt;
  
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ng-template&gt;
      &lt;ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"&gt;&lt;/ng-container&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>here is the object that I am passing to the html view.</p>
  
  <pre><code>[{
  "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": []
     }]
  </code></pre>
  
  <p>my dependency  versions are here</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I am getting this error. most of solutions for this error is not on any perfect logic base.</p>
  
  <p>correct me if somewhere i am wrong or its just a version problem.</p>
  
  <pre><code>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)
  </code></pre>