title: RangeError: Maximum call stack size exceeded in Angular
body: <p>I get an error on my Angular app kind of a stackOverflow. <strong>(see updates at the end)</strong></p>
  <p>Basically my component is a diagram that includes two components. The <code>equipment</code> component that includes the equipment information and the <code>socket</code> component, that includes the type of connections that each equipment has. The socket component basically displays a dropdown with the equipment available to connect.
  The &quot;container&quot; component basically creates a socket component with the type &quot;start element&quot; so we have a &quot;fake&quot; connection to select a start element. From then we select a start element and we can keep feeding the diagram.
  When I select the first &quot;start element&quot; (pic1) the corresponding equipment is loaded with its corresponding sockets (7 units). Then I select on one of the sockets one equipment (pic2) and the same, it is loaded with one unit, all good. Then I select one more equipment in the corresponding socket (pic3) and buum, the app crashes.
  <a href="https://i.stack.imgur.com/TGd0A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TGd0A.png" alt="Error on 3!" /></a></p>
  <p>I get this error:</p>
  <pre><code>ERROR RangeError: Maximum call stack size exceeded
      at refreshView (core.js:9461)
      at refreshEmbeddedViews (core.js:10591)
      at refreshView (core.js:9490)
      at refreshComponent (core.js:10637)
      at refreshChildComponents (core.js:9263)
      at refreshView (core.js:9516)
      at refreshEmbeddedViews (core.js:10591)
      at refreshView (core.js:9490)
      at refreshComponent (core.js:10637)
      at refreshChildComponents (core.js:9263)
  </code></pre>
  <p>I made some console logs and at the click where the error happens, the first start element is rendered (ngOnInit), the second one as well and in the third one that I clicked, the Socket onInit and Equipment onInit are called with no end. <strong>So it seems that the equipment and the socket are calling themselves with no end.</strong></p>
  <p>I checked my app, and I call only two times the socket component. Once on the container component just to create the &quot;start element&quot; socket and then on the ngfor on EquipmentComponent. And regarding equipment, it is only called once in the whole app, once <code>mySocket.element</code> is selected and is not null, therefore the ngIf shows the component.</p>
  <p>I only have one module <code>app.module</code> so here the same, there are no multiple calls to the components.</p>
  <p>Here the socketcomponent:</p>
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { Equipment } from 'src/app/model/Equipment';
  import { Socket } from 'src/app/model/Socket';
  import { EquipmentService } from 'src/app/services/equipment.service';
  
  @Component({
    selector: 'app-socket',
    templateUrl: './socket.component.html',
    styleUrls: ['./socket.component.css']
  })
  export class SocketComponent implements OnInit {
  
    @Input() mySocket: Socket;
    @Input() parentEquipment: Equipment;
  
    myElements: Equipment[];
  
    constructor( private _equipmentNewService:EquipmentService) { }
  
    ngOnInit(): void {
      console.log(&quot;Myparentequipment:&quot;, this.parentEquipment)
      this.myElements = this._equipmentNewService.getListForGivenInput(this.mySocket.type);
    }
  
    loadEquipment(eq:Equipment){
      this.mySocket.element = eq;
    }
  
    amIFirstConnection(){
      return !this.amIOnlyConnection() &amp;&amp; this.mySocket === this.parentEquipment.eqType.connections[0];
    }
  
    amILastConnection(){
      return !this.amIOnlyConnection() &amp;&amp; this.mySocket === this.parentEquipment.eqType.connections[this.parentEquipment.eqType.connections.length-1];
    }
  
    amIMiddleConnection(){
      return !this.amIOnlyConnection() &amp;&amp; !this.amIFirstConnection() &amp;&amp; !this.amILastConnection();
    }
  
    amIOnlyConnection(){
      return this.parentEquipment.eqType.connections.length===1
    }
  
  }
  </code></pre>
  <p>Here the html file:</p>
  <pre><code>&lt;!-- this is just to create the diagram lines, ignore it! --&gt;
  &lt;div *ngIf=&quot;mySocket.type !== 'Start Element'&quot;&gt;
      &lt;div *ngIf=&quot;amIOnlyConnection()&quot; class=&quot;d-flex someMarginTop&quot;&gt;
          &lt;div class=&quot;smallSpacer schema&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;mainSpacer schema borderLeft&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;amIFirstConnection()&quot; class=&quot;d-flex someMarginTop&quot;&gt;
          &lt;div class=&quot;smallSpacer schema&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;mainSpacer schema borderLeft borderTop&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;amIMiddleConnection()&quot; class=&quot;d-flex someMarginTop&quot;&gt;
          &lt;div class=&quot;smallSpacer schema borderTop&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;mainSpacer schema borderTop borderLeft&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;amILastConnection()&quot; class=&quot;d-flex someMarginTop&quot;&gt;
          &lt;div class=&quot;smallSpacer schema borderTop&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;mainSpacer schema borderLeft&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- here we display the info --&gt;
  &lt;div class=&quot;dropdown someMargin&quot;&gt;
      &lt;button class=&quot;btn btn-outline-secondary btn-sm dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton1&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
            {{mySocket.name}}...
          &lt;/button&gt;
      &lt;ul class=&quot;dropdown-menu listSocket&quot; aria-labelledby=&quot;dropdownMenuButton1&quot;&gt;
          &lt;li *ngFor=&quot;let item of myElements&quot;&gt;
              &lt;div class=&quot;d-flex&quot;&gt;&lt;a class=&quot;dropdown-item&quot; (click)=&quot;loadEquipment(item)&quot;&gt;&lt;span style=&quot;margin-right:5px&quot;&gt;{{item.eqType.productNumber}}&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;!-- and here the call to equipment --&gt;
      &lt;div *ngIf=&quot;mySocket.element&quot;&gt;
          &lt;app-equipment [equipment]=&quot;mySocket.element&quot; [parentSocket]=&quot;this.mySocket&quot;&gt;&lt;/app-equipment&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And now the equipment component:</p>
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { Equipment } from 'src/app/model/Equipment';
  import { Socket } from 'src/app/model/Socket';
  
  @Component({
    selector: 'app-equipment',
    templateUrl: './equipment.component.html',
    styleUrls: ['./equipment.component.css']
  })
  export class EquipmentComponent implements OnInit {
  
  
    @Input() equipment: Equipment;
    @Input() parentSocket: Socket;
  
    constructor() {
     }
  
    ngOnInit(): void {
      console.log(&quot;Myparentsocket:&quot;, this.parentSocket)
      this.equipment.available = false;
    }
  
    removeMyselfFromSocket() {
      this.parentSocket.element = null;
    }
  
  }
  </code></pre>
  <p>Here the html file:</p>
  <pre><code>&lt;div class=&quot;someMargin somePadding  col-md-auto border rounded eqContainer animated fadeIn fast&quot;&gt;
      &lt;div style=&quot;float:right&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger px-3&quot; style=&quot;padding: 0px 7px !important;&quot; (click)=&quot;removeMyselfFromSocket()&quot;&gt;&lt;i class=&quot;fas fa-trash fa-xs&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;d-flex&quot;&gt;
          &lt;div&gt;
              &lt;!-- &lt;img [src]=&quot;equipment.eqType.img&quot; class=&quot;img-fluid imgTestModel&quot; [alt]=&quot;equipment.eqType.productNumber&quot;&gt; --&gt;
          &lt;/div&gt;
          &lt;div style=&quot;margin-left:5px&quot; class=&quot;bg-light border rounded somePadding&quot; style=&quot;margin-right:30px&quot;&gt;
              &lt;!-- &lt;p class=&quot;title p-lessMargin text-primary&quot;&gt;{{equipment.eqType.productNumber}}&lt;/p&gt; --&gt;
              &lt;p class=&quot;ids p-lessMargin&quot;&gt;ProductNO: &lt;span class=&quot;ids-content&quot;&gt;ABC8493RT&lt;/span&gt; &lt;/p&gt;
              &lt;p class=&quot;ids p-lessMargin&quot;&gt;SerialNO: &lt;span class=&quot;ids-content&quot;&gt;15698247896&lt;/span&gt;&lt;/p&gt;
              &lt;p class=&quot;ids p-lessMargin&quot;&gt;SwRev: &lt;span class=&quot;ids-content&quot;&gt;2.2.145&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class=&quot;d-flex&quot;&gt;
          &lt;app-socket *ngFor=&quot;let socket of equipment.eqType.connections&quot; [mySocket]=&quot;socket&quot; [parentEquipment]=&quot;equipment&quot;&gt;&lt;/app-socket&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>I hope I attached enough information and I would be very happy to get some help!</p>
  <p>Thanks in advance :)</p>
  <p><strong>Update 1:</strong>
  After changing on socket component this method (to avoid the change detector being called the whole time):</p>
  <pre><code>equipmentSelected:Equipment;
  loadEquipment(eq:Equipment){
      this.equipmentSelected = eq;
    }
  </code></pre>
  <p>I can now add more childs to my tree. Now the question is, how can I do to keep the <code>this.mySocket.element = eq</code>? Otherwise I would lose my tree structure and would not be able to serialize my objects...</p>