2

Estoy intentando mandar datos del componente padre al componente hijo en Angular. La idea es que cuando ocurra un cambio en algunas propiedades del componente padre, automáticamente se actualicen algunas propiedades del componente hijo. Lo que muestro a continuación es una simplificación de lo que estoy intentando hacer. Básicamente las propiedades del padre son un array y un string, que guardan relación con otro array y otro string del componente hijo. Las propiedades son independientes entre sí, es decir, que cambie una no significa que cambie la otra.

Cuando se inicia la aplicación se tiene: introducir la descripción de la imagen aquí

y el resultado final que deseo es que cuando el usuario cambie las propiedades del padre es por ejemplo:

introducir la descripción de la imagen aquí

Voy a dejar el enlace de StackBlitz, pero de todos modos voy a incorporar las plantillas html y los ficheros typescript de ambos componentes.

Plantilla Padre:

<div id='contenedor_padre'>
  <h3>Componente Padre</h3>
  <select (change)="optionChanged($event.target.value)">
    <option value="option_1">Opción 1</option>
    <option value="option_2">Opción 2</option>
    <option value="option_3">Opción 3</option>
  </select>
  <button (click)="arrayChanged()">Actualizar array</button>
  <app-hijo></app-hijo>
</div>

Typescript Padre:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-padre',
  templateUrl: './padre.component.html',
  styleUrls: ['./padre.component.css']
})
export class PadreComponent implements OnInit {
  arrayPadre: number[];
  textoPadre: string;

  constructor() { 
    this.arrayPadre=[];
    this.textoPadre='';
  } 

  ngOnInit() {
  }

  optionChanged(selectedValue: string){
    this.textoPadre=selectedValue;
  }

  arrayChanged(){
    this.arrayPadre=[1,2,3,4,5,6,7,8,9,10];
  }

}

Plantilla Hijo:

<div id="contenedor_hijo">
  <h4>Componente Hijo</h4>
  <p>{{textoHijo}}</p>
  <p>La suma es: {{suma}}</p>
</div>

Typesript Hijo:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hijo',
  templateUrl: './hijo.component.html',
  styleUrls: ['./hijo.component.css']
})
export class HijoComponent implements OnInit {
  textoHijo: string;
  arrayHijo: number[];
  suma: number;

  constructor() { 
    this.textoHijo='Texto hijo inicial';
    this.arrayHijo=[];
    this.suma=0;
  }

  ngOnInit() {}

  actualizarValores(){
    //Actualizar aquí textoHijo con los datos del padre
    //Actualizar aquí arrayHijo con los datos del padre
    this.suma=0;
    if(this.arrayHijo != null){
      for(let i=0; i<this.arrayHijo.length; i++){
        this.suma += this.arrayHijo[i];
      }
    }
  }
}

En el hijo se toma la cadena enviada desde el padre y se la muestra sin ningún cambio, y con los datos del array recibido se suman sus valores y se muestra en pantalla.

He puesto una única función en el hijo para actualizar los valores actualizarValores(), esto no necesariamente tiene que ser así, podrían usarse una función independiente para actualizar cada propiedad.

En este ejemplo he utilizado un array, pero podría ser un objeto el dato actualizado?

El enlace de stackblitz es: enlace

Muchas gracias.

1 respuesta 1

3

Bueno hay varias maneras de compartir información desde los componentes padre y desde los componentes hijos en ambas vías.

Te dejo la url del StackBlitz con las modificaciones

Prueba este codigo de StackBlitz

Que hice:

En el componente padre declare una variable:

@ViewChild('datosDesdeElPadre', { static: false }) datosDesdeElPadre: HijoComponent;

con la cual accedo al componente hijo.

En el selector del hijo que esta en el padre declare la propiedad con el nombre de la variable que cree.

<app-hijo #datosDesdeElPadre></app-hijo>

Ahora en el hijo declare una variable con el decorador @Input la cual es la que se encarga de saber si se realizaron cambios en el padre así:

 @Input() estollegadelpadre: any;

Y final mente la muestro:

<label>{{estollegadelpadre}}</label>

Revisa el enlace de como lo hice en tu codigo.

Espero sea de ayuda

2
  • Muchas gracias ! Funciona !
    – Lucas
    el 2 oct. 2019 a las 20:40
  • @Lucas No olvides marcar la respuesta como aceptada se fue de ayuda. el 2 oct. 2019 a las 21:43

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.