Para poder seguir este artículo es necesario crear un proyecto de Angular y arrancarlo. Si necesitas más información de cómo crear y arrancar un proyecto te aconsejo visitar el siguiente enlace: Instalando Angular, creando un proyecto y arrancándolo en local

En el artículo anterior, ya os presentemos la comunicación entre componentes y como comunicar componentes, concretamente hablamos sobre la comunicación desde un componente padre hacía un componente hijo.

En este artículo, hablaremos del proceso inverso es decir enviaremos datos de un componente hijo hacía un componente padre mediante a la propiedad Output Property y su decorador @Output. También, trabajaremos con alias sobre nuestro decorador @Output. ¡Si os parece, comenzamos!

Tipos de comunicación entre componentes

Como ya hemos visto anteriormente, Angular se basa en componentes, y en muchas ocasiones nos puede surgir la necesidad de realizar comunicaciones entre nuestros componentes con el fin de que interactúen entre ellos y poder de esta forma traspasar datos de nuestro componente principal hacía el secundario o viceversa. Para realizar dichas acciones surgen las propiedades InputProperty (que utilizará el decorador @Input) y OutputProperty (que utilizará el decorador @Output).

Ya hemos visto que tenemos dos tipos de comunicaciones vamos a explicarlas más al detalle:

  • Comunicación del componente padre (principal) hacía el componente hijo (secundario).
      • Utilizamos Input Property mediante al decorador @Input
  • Comunicación del componente hijo (secundario) hacía el componente padre (principal).
      • Utilizamos Output Property mediante al decorador @Output

Creando el componente hijo

Bien, para trabajar con nuestros componentes vamos a generar primeramente el componente hijo:

Ahora tenemos dos componentes en nuestra aplicación el componente padre (app.component.ts) y el componente hijo (hijo.component.ts)

Asociando el componente hijo con el componente padre

Si vamos al componente hijo podemos ver su selector (el nombre del componente que utilizaremos para añadirlo al componente padre), su template (el HTML), y su hoja de estilo (CSS en nuestro caso).

Vemos que en la vista del componente hijo tenemos el siguiente texto:

Si me meto en componente padre y modifico el contenido de su template, podemos ver cuál es su template:

Y modificarla añadiéndole un h1 junto al selector (nombre) del componente hijo:

Si ahora probamos nuestra aplicación de Angular, podemos ver que funcionan correctamente, aunque, por el momento no se están comunicando entre sí:

Comunicación de hijo a padre (@Output)

Para poder realizar la comunicación mediante a Output Property necesitamos:

  • Crear la variable o el objeto (en nuestro caso una variable llamada mensaje) dentro de nuestro componente hijo.component.ts cuya información vamos a transferir hacía el componente padre (app.component.ts)
  • Importar en la clase hija la interfaz Output y EventEmitter que se encuentran en el módulo de @angular/core. Como ya tenemos un import de otros elementos para el módulo @angular/core, podemos concatenar las interfaces que vamos a utilizar.
  • Una vez hemos hecho el import, ya podemos trabajar con el decorador @Output junto al nombre del evento que vamos a crear. Ya que para poder transferir de un componente hijo hacía un componente padre, necesitamos crear un evento mediante a la clase EventEmitter<TipodeDatoATransferir>(). El tipo de dato de este evento, será el que le pasemos en la función ejecutar evento que ejecutaremos al pulsar el botón de la template HTML del componente hijo.
  • Posteriormente, vamos a la template HTML del componente padre y asociamos a el evento que hemos creado en el componente hijo con la función getMensaje. El resultado será: (miEvento) = “getMensaje($event)”.
  • Finalmente, solo nos faltaría crear el método getMensaje dentro de nuestra lógica del componente padre.

Si vamos a nuestra aplicación de Angular y con el inspector del navegador abierto en la pestaña de consola hacemos click sobre el botón, podemos ver que:

Ya tenemos visibilidad de la variable del componente hijo desde el componente padre, pero no hemos guardado dicho valor en ningún sitio. Si queremos guardar el valor en nuestro componente en la variable padre, necesitamos definir una variable dentro de la función getMesage asignarle el valor que recibimos como parámetro desde el evento del elemento hijo hacía nuestro componente padre. Una vez tenemos la variable mensajeInParent de paso, podemos utilizar String interpolation y mostrar su valor en nuestro componente padre.

Si ahora repetimos el proceso, podemos ver que no nos aparece el valor de la variable (ya que aún no hemos ejecutado el evento)

Si hacemos click, ahora sí que nos aparece el console.log y se nos muestra el contenido en el componente padre.

Declarando un Alias en @Output

Bueno, ya hemos trabajado con alias anteriormente, vamos a ver un ejemplo de cómo declarar un alias sobre @Output:

Espero que os haya gustado. Un saludo