Max Stack Call Size when adding parent's tamplate into child's HTML template in Angular

Question

This is the child's template:

<div id="io-struct">
    <div id="input-struct">
        <h3>Degrees: <input type="number" [(ngModel)]="degrees"></h3>
        <h3>Type:
            <select [(ngModel)]="type">
                <option value="0">Select an option</option>
                <option value="1">Celsius</option>
                <option value="2">Fahrenheit</option>
            </select>
        </h3>
        <input type="button" value="SAVE" (click)="emitNewData()">
    </div>
    <app-convparent></app-convparent>
</div>

I'm working on ./conversion and when <app-convparent></app-convparent> is added to the template for showing data on parent, i start getting the Max Stack call size exceeded error

And I'm trying to communicate them via @Output()

child's component:

import { Component, Output, EventEmitter } from '@angular/core';
import { Conversion } from './../../../models/conversion.model';

@Component({
  selector: 'app-conversion',
  templateUrl: './conversion.component.html',
  styleUrls: ['./conversion.component.scss']
})
export class ConversionComponent {
  type: number = 0;
  degrees: number = 0;

  @Output() newDataEmitter = new EventEmitter<Conversion>();

  emitNewData() {
    let newConversion = new Conversion(this.type, this.degrees)
    this.newDataEmitter.emit(newConversion);
  }
}

parent's component:

import { Component } from '@angular/core';
import {Conversion} from './../../../models/conversion.model';

@Component({
  selector: 'app-convparent',
  templateUrl: './convparent.component.html',
  styleUrls: ['./convparent.component.scss']
})
export class ConvparentComponent {
  conversionList:Conversion[] = [];
  

  receiveData(datos : Conversion){
    console.log("Received from parent: ", datos);
    this.conversionList.push(datos);
  }

}

parent's template:

<app-conversion (newDataEmitter)="receiveData($event)"></app-conversion>
<table *ngIf="conversionList.length > 0">
    <thead>
      <tr>
        <th>Celsius</th>
        <th>Fahrenheit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let conversion of conversionList">
        <td>{{ conversion.degree }}</td>
        <td>{{ conversion.converted }}</td>
      </tr>
    </tbody>
  </table>

The only way it stopped throwing that error was removing <app-convparent></app-convparent> but in that way parent's info will not be displayed. If i put them directly in app's template it works but that is not the way i want it to work.

Answer 1

First of all, the purpose of this app is to display a table with conversions between Celsius and Fahrenheit degrees.

I was using a basic toolbar for switching between directories, and I was using ./conversion (child component) so if i erased <app-convparent></app-convparent> from child's template it showed only the form but no the table and, if it was not deleted, it would throw the error "Max stack call size" because both components where using each other.

So it was necessary to change route to parent's component in the toolbar replacing "./conversion" for "./convparent" (parent component):

<nav>
    <ul>
        <li><a routerLink="/" routerLinkActive="active">Home</a></li>
        <li><a routerLink="/convparent" routerLinkActive="active">Conversion</a></li>
    </ul>
</nav>

After that i deleted <app-convparent></app-convparent>from the child's template and it worked perfectly.