Angular: 12. @Output. Pasar un evento de un componente hijo a uno padre

Esta vez vamos a ver el caso contrario, pasar información de un componente hijo a su pcomponente padre.

Hay que hacer una distinción. En la entrada anterior, cuando pasamos información de un padre a su hijo, estábamos pasando parámetros, es decir, variables con cierta información.
Ahora que vamos a pasar información de un hijo a su padre, lo que vamos a pasar es un evento, dentro del cual incluiremos las variables que queramos, en lugar de pasar las variables directamente.

En nuestra aplicación, tras separar los componentes de lista de tarjetas (padre) de la tarjeta en sí (hijo), nos ha quedado una función "verHeroe" en el componente tarjeta que es la que muestra el detalle del héroe.
Lo que vamos a hacer es cambiar de lugar esa funcionalidad y que se encargue el padre de mostrar el detalle del héroe seleccionado. Es decir, vamos a hacer que, al hacer click en el detalle de una tarjeta, el identificador del héroe seleccionado viaje al componente padre (la lista de tarjetas) y que desde allí se llame a la función "verHeroe" que nos muestre el detalle.

Lo primero que vamos a hacer es copiar la función "verHeroe" del fichero "heroe-tarjeta.component.ts" (hijo) y pegarla en el fichero "heroes.component.ts". Después comentamos el contenido de la función "verHeroe" del fichero "heroe-tarjeta.component.ts".
Ahora para ver el detalle del héroe necesitamos llamar a la función del componente padre (lista de héroes) desde el componente hijo (héroe en sí).

Para hacerlo, modificamos la parte TypeScript del componente hijo como sigue:

Como se puede ver, primero hemos importado el Output y el EventEmitter del @Angular/core.
Después hemos creado una variable "heroeSeleccionado" que es de tipo "EventEmitter" y que va a emitir un dato de tipo numérico. Lleva el "@Output" delante para indicar que lo vamos a enviar.
A continuación inicializamos la variable en el constructor de la clase.
Por último, en la función "verHeroe", tras comentar la línea anterior, hacemos que se envíe el evento "heroeSeleccionado" y que se lleve consigo la variable "index" de tipo numérico que ya se encontraba en la clase antes (está señalada en la captura con una flecha) y que indica el héroe seleccionado.

Con esto hecho, cada vez que pulsemos el botón detalle de uno de los héroes, estamos enviando al componente padre la información de qué héroe ha sido pulsado. Ahora debemos hacer que el componente padre recoja correctamente la información y lance la función adecuada.

Para ello modificamos el componente html del padre ("heroes.component.html") como sigue:

Como se puede ver, dentro de la etiqueta del componente hijo hemos incluido un nuevo escuchador de eventos llamado "heroeSeleccionado" (mismo nombre que le dimos al evento en el componente hijo), que llamará a la función "verHeroe" DEL COMPONENTE PADRE, y que le pasará como parámetro una variable "$event", que se corresponde con la variable "index" del componente hijo.

Y con esto sería todo. La función "verHeroe" debería mostrar el detalle del héroe seleccionado tal y como lo teníamos anteriormente.