0

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.

Edmon
  • 1
  • 1
  • For sure you have to remove the parent's selector from child's template. Other than that, your code should work, please check: https://stackblitz.com/edit/angular-ivy-3fjuaq?file=src%2Fapp%2Fapp.component.ts – Misha Mashina Apr 22 '23 at 07:35
  • You have generated an endless loop, both components use each other. Could you please elaborate what you are trying to achieve? – JSON Derulo Apr 22 '23 at 09:35
  • @MishaMashina Thank you very much, based on that I was able to fix it. I realized that I had to remove parent's tag from child and change the route I was working on from being the child's to the parent's. – Edmon Apr 26 '23 at 05:50
  • @JSONDerulo Sorry, I was trying to display a table that shows conversions between Celsius and Fahrenheit degrees using two components, anyways, thanks for your contribution it helped me a lot. – Edmon Apr 26 '23 at 05:54

1 Answers1

0

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.

Edmon
  • 1
  • 1