Angular: 11. @Input. Pasar información de un componente padre a uno hijo

Hemos visto cómo pasar parámetros entre rutas. Ahora vamos a ver cómo pasar parámetros de un componente padre a otro hijo.

Siguiendo con nuestra aplicación, teníamos el componente de héroes en el que mostrábamos una lista de héroes. Esta lista de héroes era un contenedor de tarjetas dentro de la cual metíamos una única tarjeta que copiábamos con la directiva *ngFor.

Lo que vamos a hacer ahora es separar el contenedor de tarjetas de las tarjetas en sí, poniendo cada una en un componente distinto. La directiva *ngFor la seguiremos utilizando, pero esta vez, en lugar de utilizarla en la tarjeta en sí para copiarla, la utilizaremos en el contenedor de tarjetas para que copie el componente de la tarjeta.
De esta forma podemos reutilizar el código de las tarjetas para alguna otra pantalla y no sólo para la lista de héroes.

Creamos el nuevo componente y pegamos en el html el mismo código de la tarjeta que teníamos en el componente:

En la parte TypeScript del componente es donde está la gracia, lo modificamos como sigue:

Como se puede ver, primero importamos el Input del @Angular/core, lo que nos permite recibir parámetros.
Después declaramos las variables "heroes" y "index" de forma normal, excepto que hemos puesto delante el código "@Input()". Con ése código estamos indicando que esas variables pueden venir con valor desde un componente padre. Si llegaran sin valor, se crearían de forma normal sin ningún problema.

Por último, modificamos el html del componente del contenedor de tarjetas, eliminando todo el código de las tarjetas (excepto el contenedor) y sustituyéndolo por la etiqueta del nuevo componente, pasando las variables e incluyendo la directiva *ngFor para que copie el componente por cada héroe que venga en el array:

Como se puede ver, añadimos la etiqueta del nuevo componente y le incluimos los parámetros "heroe" y "index", de la siguiente forma "[heroe]="heroe"".
La variable entre corchetes debe coincidir con la del TypeScript del componente de las tarjetas, es decir, la variable destino.
La variable entre comillas debe coincidir con la variable del *ngFor.
De esta forma le estamos diciendo a la aplicación que cargue un componente tarjeta por cada héroe en el array, y le pasamos sus datos.

Y eso es todo.