Comunicación entre componentes Angular

Posted by in Angular

Cada uno de los elementos que componen la interfaz de una aplicación Angular se define como un componente, definidos en archivos html y ts.

Tanto el componente padre como el componente hijo tienen su propio archivo ts (donde se define la lógica) y el archivo html (donde se define la parte gráfica). En el caso del archivo html del componente padre aparecerá la etiqueta asociada al componente hijo, de forma que existe una relación de pertenencia
.

En el ejemplo se puede ver como se define en el html del padre todos los componentes que formarán parte de la interfaz gráfica, incluyendo la etiqueta <app-hijo> que muestra la parte gráfica asignada en el archivo html del componente hijo

El resultado gráfico de todo el ejemplo a desarrollar es el siguiente:

La comunicación se puede dar en dos sentidos:

  • Un elemento que está en el componente padre se quiere pasar al elemento hijo que contiene
  • Un elemento que está en el componente hijo se quiere pasar al elemento padre donde está contenido

Comunicación padre – hijo

 

En este caso se quiere pasar una información desde el componente padre hasta el componente hijo, teniendo en cuenta que el segundo está contenido en el html del primero. Para ello los pasos a seguir son los siguientes:

  • Declarar un decorador @Input en el componente hijo. Este decorador servirá como el nexo de unión entre los dos componentes. Este decorador se asigna a una variable, la cual podrá ser utilizada en el html del componente hijo

El decorador componenteComunicar guardará el dato pasados desde el padre. Para utilizarlo en el html tan solo es necesario llamarlo con {{}} para utiliza su contenido

  • En el archivo html del padre que contiene la etiqueta del hijo, se utiliza la variable con decorador definida en el hijo como atributo de la etiqueta, utilizando data binding

En este caso se trata de una variable definida en el archivo .ts del padre la cual recoge el contenido del input mediante la pulsación del botón

En evento click del botón ejecuta el método de la clase que iguala la variable datoComunicar al contenido del input, al mismo tiempo que la etiqueta <app-hijo> tiene como atributo el @Input declarado igualándolo a la variable

Comunicación hijo – padre

Se trata del mismo supuesto que el caso anterior, con la diferencia que el elemento que se quiere pasar entre componentes se encuentra en el hijo y el destino es el componente padre (que contiene al hijo en el html). Para poder hacer este tipo de comunicación se realizan los siguientes pasos:

  • Se declara un decorador @Output que es de tipo EventEmitter() en la clase ts del elemento origen

  • Se crea un método que será llamado cuando se quiera realizar la comunicación. En este ejemplo al querer pasar un string entre componentes, dicho método recibe como parámetros el componente. Para poder asociar los datos a introducir en el EventEmitter se utiliza un par clave – valor, donde la clave se asocia a un dato concreto. En el ejemplo el dato que se quiere pasar se asociará a la clave elemento, la cual será utilizada cuando se quiera recuperar el dato

  • El método creado es llamados en el momento en el que se quiere realizar la comunicación. En el ejemplo será llamado desde un botón situado en el elemento hijo

  • En el archivo html del  elemento padre, dentro de la etiqueta asociada al elemento hijo se declara un evento con el mismo nombre del decorador @Output declarado en el punto uno, y se iguala a un método que se deberá crear en la clase asociada al componente padre. Este método recibe como parámetro un evento ($event) que es aquello emitido por el EventEmitter del hijo

  • En el método creado en el punto anterior, se recuperarán todos los datos del evento emitido metiste los valores key asociados a cada uno de los datos

El código completo de los tres elementos utilizados es el siguiente: