Maximum Call Stack Size Exceeded in Angular – Causes and Fix

In this tutorial, you will clear the concept of Maximum Call Stack Size Exceeded in Angular

You will get the error

This error happens when too many function calls are pushed onto the call stack, usually due to infinite loops, recursive function calls, or Angular change detection issues.

What Causes “Maximum Call Stack Size Exceeded” in Angular?

There are many causes of Maximum Call Stack Size Exceeded.

1. Infinite Recursion

When a function calls itself without a stopping condition then this situation is Infinite Recursion.

❌ Incorrect Code

function test(){
  test();
}
test();

This creates an infinite recursion, filling the call stack.

✅ Correct Code

function test(n:number){
  if(n === 0) return;
  test(n-1);
}
test(5);

Note: You can add a condition to prevent the infinite loop.

2. Recursive Getter or Setter

Sometimes a property getter calls itself accidentally.

❌ Wrong Example

get username(){
  return this.username;
}

In the above example, username repeatedly calls the same getter (username).

✅ Correct Example

private _username = "John";
get username(){
  return this._username;
}

3. Angular Change Detection Loop

Angular change detection may repeatedly trigger a function inside templates.

❌ Wrong Example

//in template file
<div>{{ getData() }}</div>

//in TypeScript file
getData(){
  return Math.random();
}

In the above example, Angular will call this function getData() during every change detection cycle, which may cause performance issues or a stack overflow.

✅ Fix the above example

You will store values in a variable instead of calling functions in templates.

//in TypeScript file
data = Math.random();

//in template file
<div>{{ data }}</div>

4. Circular Function Calls

When two functions may call each other repeatedly.

function a(){
  b();
}

function b(){
  a();
}

a();

In the above example, it will cause infinite recursion.

5. Incorrect Event Binding

Sometimes events trigger functions that trigger the same event again.

onClick(){
  this.onClick();
}

This issue creates an endless function loop.

How to Fix Maximum Call Stack Size Exceeded

Example Angular Safe Code

In the example below, it prevents infinite recursion and keeps the application stable.

@Component({
  selector: 'app-root',
  template: `<p>{{count}}</p>`
})
export class AppComponent {

  count = 0;

  increase(){
    if(this.count < 10){
      this.count++;
    }
  }

}

Best Practices to Avoid This Error

Conclusion

The Maximum Call Stack Size Exceeded error in Angular usually occurs because of:

1. Infinite recursion
2. Circular function calls
3. Recursive getters or setters
4. Functions inside templates triggering change detection