Angular 5 is encountering an error with a recursive template, specifically a RangeError stating that the maximum call stack

Hey there, I'm currently utilizing Angular recursive template to represent arrays recursively.

The code I've been following is provided in this link.

My array is dynamic in nature.

<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>

I'm passing the following object 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": []
   }]

Below are my dependency versions:

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'm facing an error and most solutions seem to lack a strong logic base. Please correct me if I am mistaken or it's just a version compatibility issue.

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)
angulartypescriptangular-cli

Answer №1

The issue lies in your iteration process where you are looping through the AllDepartmentList instead of targeting the local variable list within your ng-template.

To resolve this, you need to update the ngForOf-directive from:

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

to: 

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

Find the corrected version of your code here: stackblitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code: This is the project structure: https://i.stack.imgur.com/GAlsX.png The files are organized as follows: ComplexCalculator.ts export class ComplexCalculator { public sqr(v1: number): number ...

javascriptjsontypescriptgulpvisual-studio-code

Choose to either push as a single object or as individual items

I have a quick question that I'd like to get some clarity on. Can someone explain the distinction between these two code snippets: export const addToCart = function(product, quantity){ cart.push({product, quantity}); console.log(`${quantity} ...

javascriptarraystypescriptecmascript-6

Despite EsLint and Prettier's efforts to improve code quality, users are experiencing frequent unnecessary errors and unexpected auto-insertion of parentheses at

When working with redux saga for handling asynchronous calls, I encountered an issue. After making an API call and storing the retrieved data in local storage, eslint/prettier automatically adds parentheses to the assignment operator at the end of the line ...

reactjstypescriptprettier-vscode

At what point is a service generated through dependency injection?

Within my Angular service, there is some initialization code within its constructor. I am curious to know when this code gets executed - is it when the service is first provided in a module, or does it wait until the first component injects it? Does th ...

angularangular-dependency-injection

Receiving distinct data from server with Ionic 2 promises

Utilizing ionic 2 RC0 with promises to retrieve data from the server, I am facing an issue where I consistently receive the same data in every request due to the nature of promises. Hence, my question is: How can I tackle this problem and ensure differen ...

angulartypescriptionic-frameworkionic2

Attempting to connect to "http://localhost:4242/webhook" was unsuccessful due to a connection refusal when trying to dial tcp 127.0.0.1:4242

In my next.js 13 project, I am integrating stripe with TypeScript and configuring the app router. To create a stripe event in my local machine, I ran stripe listen --forward-to localhost:4242/webhook, but now I am encountered with the error message stripe ...

typescriptnext.jsstripe-payments

The failure to import a node module in next.js with typescript

I'm currently working on integrating a package called bcrypt into my project. I have successfully installed it using npm install bcrypt. Although the package is visible in the node_modules folder, I am encountering an error when trying to import it i ...

typescriptnext.jsnpm-installtypescript-module-resolution

What causes my browser fingerprint to consistently remain unchanged?

declare var Fingerprint2: any; @Component({ selector: 'my-app', template: `Hello`, }) export class App { constructor() { new Fingerprint2().get(function(result, components){ console.log(result); // Device fingerprint as a hash va ...

javascriptangularbrowserhashfingerprintjs2

What is the syntax for calling a Component located in a sub-folder in Angular/Ionic?

I have a custom component located in /app/components/my-component When the component is in the app/ directory, I can easily reference it like this: <app-my-component></app-my-component> and it functions properly. However, when I move the comp ...

angularionic4

adjusting the scrollbar to be positioned at the top when using Material UI stepper component

While using the material ui stepper, I encountered an issue where the scroll bar remains static and hidden behind the step number header when I click on the "save and continue" button. I expect that upon clicking the button, the scroll bar should automatic ...

reactjstypescriptmaterial-ui

The custom component is not updating the NgIf directive in HTML even though it receives a boolean variable

I am struggling with a custom component that includes an *ngIf in its view to handle a boolean variable, but for some reason the *ngIf directive is not working. Here is the code snippet: Component @Input('title') titleText; @Input('backButt ...

angulartypescriptionic4angular-componentsangular-ng-if

A guide to declaring MongoDB models in TypeScript across multiple files

In my Node.js TypeScript project, the structure is as follows: https://i.stack.imgur.com/YgFjd.png The crucial part of the structure lies in mongoModels. I have 2 models where each Category model is connected and contains field category.expertUserIds whi ...

typescriptmongodbmongoose

Using multiple conditions in an angular ngif statement to create a variable

Is it possible to assign the result of a function to a variable in Angular (13) within the .html section of a component, specifically with multiple conditions in ngIf? <div *ngIf="let getMyVar() as myVar && isVisible && isClean" ...

javascriptangularangular13

Creating a personalized NPM package: Converting and exporting TypeScript definitions

Question: Do I need to adjust my TS configuration or add a TS build step? I recently developed a new npm package: Custom-NPM-Package / - src -- index.js -- index.d.ts -- IType.ts accompanied by this tsconfig.json: { "compilerOptions" ...

node.jsreactjstypescriptnpm

The data stored in the variable cannot be accessed when calling it in a different method

Within my component, there are several methods including constructor(){...} and ngOnInit(){...}. I have declared a variable named values:any=[] in the class, and it is initialized with JSON data within a method called getData(). getData(){ this.service. ...

angulartypescriptangular5

Issue with Nuxt2 CompositionAPI: Unable to showcase imported render function in component - Error message states "template or render function not defined"

I have created a render function that I believe is valid. I am importing it into a component and registering it within the defineComponent. However, when running the code, I encounter an error saying "template or render function not defined". I am confide ...

typescriptimportvuejs2nuxt.jsvue-composition-api

Encountering an "Invalid parameter: redirect_uri" error in Keycloak while manually refreshing the page

This is an Angular 17 single-page application utilizing the latest version of keycloak-angular (15.2.1 at the time of writing). I'm facing a perplexing issue where after successfully authenticating and logging out, if I reload the page, it breaks enti ...

angularkeycloak

Tips for generating a new method using an existing one

Searching for the best practice to inform the ts compiler that a method will be generated at runtime. interface Todo { /* ... */ } export class TodoModel { todos: Todo[] = []; constructor() { //... } bindTodoListChanged(callback : (todos: Todo[]) ...

typescript

Customizing date colors in JavaScript: A step-by-step guide

var active_dates1 = ["2017-04-02 00:00:00","2014-04-03 00:00:00","2014-04-01 00:00:00"]; $('.datePick', this.$el).datepicker( beforeShowDay: function (date) { for(let date1 of active_dates1){ if (date.getTime( ...

javascriptangular

Angular's Viewchild isn't functioning properly

I am facing an issue in calling a method of a child component from the parent component to pass a property. export class PruebabookComponent implements OnInit { public identity; public token; public books: Book[]; public totalPages; public page ...

angular