0

Estoy intentando mandar una info del componente padre al hijo pero en la etiqueta de no me reconoce la función que tengo definida en el .ts del hijo. Alguien sabe por qué? Gracias de antemano

Padre .ts
@Output() send = new EventEmitter<any>()

onDataLoaded() {
  this.send.emit(this.idRisk)
}

HTML Padre
<app-bubble-chart (send) = "procesaSend($event)"></app-bubble-chart> // no me reconoce procesaSend: 

//Identifier 'procesaSend' is not defined. The component declaration, template variable declarations, and element references do not contain such a member


Hijo .ts
procesaSend(send) {
    console.log(send)
}

2 respuestas 2

0

Para enviar del padre al hijo es vía Input(), para que sea del hijo al padre es cuando es con se utiliza el Output() con eventEmitter. Es decir, en tu caso necesitas:

Padre:

<app-bubble-chart *ngIF="idRisk" [risk] = "idRisk"></app-bubble-chart>

Hijo:

@Input() risk: string;

Así es una manera de pasarle datos del padre al hijo, otra puede ser mediante un servicio según tus necesidades.

5
  • Pero yo lo que quiero es que cuando en el componente A se acabe de cargar una información , se ejecute el componente B(<app-bubble-charts>). Pero esa información no aparece hasta que está el componente cargado al 100%, incluso utilizando el ultimo método del ciclo de vida del componente tampoco me vale. Gracias por la ayuda. Commented el 16 abr. 2020 a las 10:23
  • Puedes poner <app-bubble-chart *ngIf="idRisk" [risk] = "idRisk"></app-bubble-chart> o bien pasarle un observable por parámetro al hijo y que se suscriba. SI quieres que el hijo no se muestre hasta que tenga los datos lo mejor es el IF.
    – SantiSori
    Commented el 16 abr. 2020 a las 10:39
  • me gustaría entender eso segundo. Quiero decir, el idRisk lo recibo de una DDBB y yo después se lo paso al componente B con @input pero claro, hasta que la petición se hace y muestra los datos yo no puedo enviarle el idRisk al componente B para que se muestren. Si no me sale undefined. Como puedo enviar un suscribe de un componente a otro como dices tu? Commented el 16 abr. 2020 a las 10:50
  • Lo más rápido, sencillo y correcto es invocar al componente hijo cuando tenga valor, para ello utiliza ngIf. Lo segundo no es recomendable.
    – SantiSori
    Commented el 16 abr. 2020 a las 11:05
  • Pues cuando lo hago no me carga el componente, supongo que será problema del framework que me mandan utilizar en el trabajo, que esté chocando o algo. Commented el 16 abr. 2020 a las 11:55
0

Para comunicar un componente hijo con el padre, se usa @OutPut() y un EventEmitter, la definición de esto debe hacerse en el hijo así:

hijo.component.ts

import { Component, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "hijo",
  templateUrl: "./hijo.component.html",
    styles: [
    `.contenedor-hijo {
      color: #595959;
      padding: 6px;
      background-color: yellow;
    }`
  ]
})
export class HijoComponent {
  @Output() hijoClick: EventEmitter<any>;

  constructor() {
    this.hijoClick = new EventEmitter<any>();
  }

  click() {
    // Decirle al papá que se hizo click
    this.hijoClick.emit();
  }
}

Luego en el html del padre asocias el evento a un método propio del padre así:

padre.component.html

<div class="contenedor-padre">
  <h2>Soy el padre</h2>
    <h4 *ngIf="hizoClick">¡Se hizo click en el hijo!</h4>
    <hijo (hijoClick)="hijoHizoClick()"></hijo>
</div>

En el siguiente enlace te muestro una implementación de este ejemplo: https://stackblitz.com/edit/angular-xxyxnj

Más información en: https://angular.io/guide/component-interaction

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.