Pasar datos entre components Padre-Hijo en Angular

Cómo se usan los decorators de Angular @Input y @Output para pasar información de Padre a Hijo y viceversa.

pasar-informacion-componente-padre-hijo-angular

Al desarrollar una aplicación en Angular habitualmente nos encontraremos en la situación en la que tenemos dos componentes: un componente padre y otro hijo en el que será necesario compartir información en ambas direcciones de Padre a Hijo y de Hijo a Padre. Existen múltiples maneras de hacerlo, pero hoy queremos mostrar cómo se hace de la forma más simple y directa.

Pasar datos de Padre a Hijo

Para compartir datos de Padre a Hijo, podemos usar el decorator @Input(). Es quizá la forma más sencilla de pasar datos pero se tiene que remarcar que este método generalmente sólo se aplica cuando la relación entre componentes directa. En caso de que queramos pasar datos en múltiples niveles de componetes anidados quizá sea mejor usar otras estrategias para evitar lo que se conoce como prop drilling (pasar la información a través de una cadena de componentes encadenados).

Desde el componente padre se pasa como un atributo HTML la variable [texto].

padre.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-padre',
template: `
<h2>Componente Padre</h2>
<app-hijo [texto]="textoPadre"></app-hijo>
`,
})
export class ComponentePadre {
textoPadre = "Mensaje desde el padre";
}

En el componente hijo, se reciben los datos usando el decorator @Input().

hijo.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hijo',
template: `
<h4>Componenete Hijo</h4>
{{ texto }}
`,
})
export class ChildComponent {
@Input() texto: string;
}

Pasar datos de Hijo a Padre

En ocasiones nos interesará el caso contrario, pasar información del Hijo al Padre. En este caso deberemos usar el decorator Output(). En este caso nos valdremos del método EventEmitter donde desde el componente Hijo, al hacer clic en el botón, emitiremos un evento con el texto que deseamos que reciba el Padre.

hijo.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-hijo',
template: `
<button (click)="eviarMensaje()">Enviar mensaje</button>
`,
})
export class ChildComponent {
@Output() eventoMensaje = new EventEmitter<string>();
eviarMensaje() {
this.eventoMensaje.emit('Mensaje desde el Hijo');
}
}

Desde el componente Padre, añadiremos un atributo entre paréntesis (eventoMensaje) con una función recibirMensaje($event) que crearemos en este mismo componente Padre con el parámetro $event que contiene la información que le envía el Hijo.

padre.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-padre',
template: `
<h2>Componente Padre</h2>
<app-hijo (eventoMensaje)="recibirMensaje($event)"></app-hijo>
<p>{{ texto }}</p>
`,
})
export class ComponentePadre {
texto: string;
recibirMensaje($event: string) {
this.texto = $event;
}
}

Conclusión

En este artículo hemos visto como transferir datos entre componentes Angular, concretamente entre un componente Padre a un Hijo, y de un Hijo a un Padre usando los decorators @Input() y @Output().