{"id":12699,"date":"2025-07-10T06:25:31","date_gmt":"2025-07-10T06:25:31","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12699"},"modified":"2025-07-10T06:26:06","modified_gmt":"2025-07-10T06:26:06","slug":"maximum-call-stack-size-exceeded-in-angular","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/maximum-call-stack-size-exceeded-in-angular","title":{"rendered":"Maximum Call Stack Size Exceeded"},"content":{"rendered":"<p>In Angular, the Maximum call stack size exceeded error occurs when a component repeatedly calls itself, either directly or indirectly. This results in an infinite loop of rendering, eventually overflowing the JavaScript call stack and causing the app to crash. This is often caused by improper template bindings, misused structural directives, or incorrect component references. Let\u2019s take a look at a simple example to better understand the issue.<\/p>\n<h3>hero.component.html<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n&lt;ul class=\"heroes\"&gt;\r\n  &lt;li *ngFor=\"let hero of heroes\" (click)=\"onSelect(hero)\" [class.selected]=\"hero === selectedHero\"&gt;\r\n    &lt;span class=\"badge\"&gt;{{hero.id}}&lt;\/span&gt; {{hero.name}}\r\n  &lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;!-- &lt;app-hero-detail [hero]=\"selectedHero\"&gt;&lt;\/app-hero-detail&gt; --&gt;\r\n&lt;app-heroes&gt;&lt;\/app-heroes&gt;\r\n<\/pre>\n<h3>detail component<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n<div *ngIf=\"hero\">\r\n  <h2>{{hero.name}} Details<\/h2>\r\n  <div><span>id: <\/span>{{hero.id}}<\/div>\r\n  <div>\r\n    <label>name:\r\n      <input [(ngModel)]=\"hero.name\" placeholder=\"name\"\/>\r\n    <\/label>\r\n  <\/div>\r\n<\/div>\r\n<app-hero-detail [hero]=\"selectedHero\"><\/app-hero-detail>\r\n<\/pre>\n<h3>hero component<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Hero } from '..\/hero';\r\nimport { HEROES } from '..\/mock-heroes';\r\nimport { HeroService } from '..\/hero.service';\r\n\r\n@Component({\r\n  selector: 'app-heroes',\r\n  templateUrl: '.\/heroes.component.html',\r\n  styleUrls: ['.\/heroes.component.css']\r\n})\r\nexport class HeroesComponent implements OnInit {\r\n  heroes: Hero[];\r\n  selectedHero: Hero;\r\n  constructor(private heroService: HeroService) { }\r\n  ngOnInit() {\r\n    this.getHeroes();\r\n  }\r\n  getHeroes(): void {\r\n    this.heroes = this.heroService.getHeroes();\r\n  }\r\n  onSelect(hero: Hero): void {\r\n    this.selectedHero = hero;\r\n  }\r\n}\r\n<\/pre>\n<h3>hero.detail component<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport { Component, OnInit, Input } from '@angular\/core';\r\nimport { Hero } from '..\/hero';\r\n\r\n@Component({\r\n  selector: 'app-hero-detail',\r\n  templateUrl: '.\/hero-detail.component.html',\r\n  styleUrls: ['.\/hero-detail.component.css']\r\n})\r\nexport class HeroDetailComponent implements OnInit {\r\n  @Input() hero: Hero;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n<h2>Problem in Code:<\/h2>\n<p>This example unintentionally creates a recursive loop because <app-heroes> is included inside hero.component.html, and it itself contains logic to display hero-detail, which again includes the same app-hero-detail, forming an endless self-reference.<\/p>\n<h3>Solution:<\/h3>\n<p>To fix the issue, we just need to remove the recursive component call. In this case, <app-heroes> should not be placed inside its own template<\/p>\n<h3>Updated hero.component.html<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n<ul class=\"heroes\">\r\n  <li *ngFor=\"let hero of heroes\" (click)=\"onSelect(hero)\" [class.selected]=\"hero === selectedHero\">\r\n    <span class=\"badge\">{{hero.id}}<\/span> {{hero.name}}\r\n  <\/li>\r\n<\/ul>\r\n\r\n<app-hero-detail [hero]=\"selectedHero\"><\/app-hero-detail>\r\n<\/pre>\n<h2>Conclusion:<\/h2>\n<p>The Maximum call stack size exceeded error in Angular is usually caused by recursive component rendering. By carefully managing component references and avoiding unintended self-references, this issue can be easily prevented. Always check your templates for cycles and ensure proper component structure to keep your app running smoothly.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/angular-performance-optimization\" target=\"_blank\">Angular Performance Optimization<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In Angular, the Maximum call stack size exceeded error occurs when a component repeatedly calls itself, either directly or indirectly. This results in an infinite loop of rendering, eventually overflowing the JavaScript call stack and causing the app to crash. This is often caused by improper template bindings, misused structural directives, or incorrect component references. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12700,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-12699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12699"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12699"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12699\/revisions"}],"predecessor-version":[{"id":12702,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12699\/revisions\/12702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12700"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}