Transferencia de datos a un componente hijo en Angular

Se pueden transferir datos desde un componente padre a un componente hijo. Estos datos llegarán a las propiedades de la clase hija. Veamos cómo se hace.

Para empezar, creemos en la clase del componente hijo las propiedades en las que se importarán los datos desde el componente padre:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Ahora necesitamos declarar que en estas propiedades llegarán datos desde el exterior. Para esto se utiliza un decorador especial Input. Importémoslo a nuestro componente hijo:

import { Input } from '@angular/core';

Y ahora apliquemos este decorador a nuestras propiedades:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Añadamos la salida de datos en el archivo de plantilla del componente hijo:

<p>{{ name }}</p>
<p>{{ age }}</p>

Y ahora en la plantilla del padre, al invocar la etiqueta del componente hijo, escribamos atributos, cuyos nombres coincidirán con los nombres de nuestras propiedades de la clase hija. Los valores de estos atributos llegarán a las propiedades de la clase hija:

<user-data name="john" age="25"></user-data>