0

Tengo dos componentes, un componente padre y otro hijo y lo que quiero es que al dar click a un botón se pasen los datos de un input text del componente padre al componente hijo. Lo estoy haciendo con "@INPUT" pero pasa los datos automáticamente ¿Alguna idea?

HTML componente padre

<h5>Padre</h5>
<input (input)="textpadre=$event.target.value">
<br>
<h5>hijo</h5>
<app-hijo [texthijo]="textpadre"></app-hijo>

TS componente padre

export class PadreComponent  {
 textpadre?:string;
  constructor() { }
}

HTML componente hijo

{{texthijo}}

TS componente hijo

export class HijoComponent  {
  @Input()texthijo?:string;
  constructor() { }
}
3
  • Hola, aca te dejo un ejemplo, al que se debe tener en cuenta es que para mantenerte recibiendo los cambios que el componente padre envia debes implementar una clase del ciclo de vida de los componentes NgOnChanges aca te dejo la documentacion de angular para que igual veas, espero que te ayude. Commented el 19 ene. 2021 a las 0:22
  • ¿Y como le haria para que eñ componente hijo aparezca en otro html y no en el mismo? Commented el 19 ene. 2021 a las 1:02
  • Si solo agrega <app-hijo><app-hijo/> en el componente que deces. Commented el 19 ene. 2021 a las 4:56

1 respuesta 1

0

Lo que debes hacer es agregar otra variable para pasar el valor al hijo y cuando se haga clic al botón asignar a esa variable el valor que tenga el input en ese momento:

export class AppComponent {
  recibidoDePadre: string; // esta variable contiene los datos para el hijo
  padreForm: FormControl = new FormControl();
  
  btnEnviarHijo() {
    // al hacer el clic en el botón se asigna el valor del input a la variable
    this.recibidoDePadre = this.padreForm.value;
  }
}

Y la vista del padre quedaría así incluyendo un botón:

<h1>Padre</h1>
<input type="text" placeholder="Agregar texto" [formControl]="padreForm"/>

<button (click)="btnEnviarHijo()" style="display: block; margin: 10px 0;">
  Enviar a hijo
</button>
<app-hijo [recibidoDePadre]="recibidoDePadre"></app-hijo>

Puedes ver el ejemplo completo Aquí

1
  • creo que en ves de hacer un fork de mi respuesta pudiste comentar y corregirme si lo necesitaba, pero de mi parte se ve feo que agregues una respuesta dando una solución y no mencionando de donde lo sacaste... Commented el 19 ene. 2021 a las 5:00

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.