Para envíar información del padre al hijo simplemente tenemos que utilizar el decorador @Input()
En el código del componente hijo definimos como @Input() las variables que recibirán datos:
A continuación en el template del componente Padre indicamos que variables se asociarán con las variables @Input() al crear el componente hijo, tal que asi:
En ese caso le estamos pasando un string directamente para asociarlo con la variable @Input() del hijo, pero tambien podemos pasarle una variable del componente padre entre comillas tal que asi;
En este caso en el código del componente padre tendríamos que tener declaradas las variables nombre y apellido
Para comunicarnos en el otro sentido, del hijo al padre, tenemos que utilizar el decorador @Output() en el componente hijo y declarar una variable de tipo EventEmitter:
NOTA: Cuando importamos EventEmitter tenemos que fijarnos que sea del paquete @angular/core ya que hay varios paquetes que tienen la clase EventEmitter y si importamos la que no es no nos funcionará.
Cuando declaramos la variable de tipo EventEmitter tenemos que utilizar un Generic para indicar el tipo de datos que emitirá, en este caso será un string
A continuación utilizaremos esta variable para emitir datos del hijo al padre:
En este caso estamos enviando las propias variables que hemos recibido del padre para devolverselas como un string poniendo primero el apellido y despues el nombre
En el padre tenemos que definir una funcion que recibirá los datos emitidos por el hijo
En este caso tenemos una funcion printName que recibe como parametro el string enviado por el hijo y lo asigna a la variable fullName que tiene el componente padre
Y en el template lo definimos de la siguiente manera:
Indicamos la variable EventEmitter del hijo entre parentesis, childEmitter en este caso, y despues indicamos la funcion del padre que estará asociada al EventEmitter para recibir la información del hijo indicando el parametro $event que será la propia información que recibirá
En este caso la funcion printName simplemente se encarga de asociar la información a la variable fullName y en el template del componente padre simplemente mostramos dicha variable:
El resultado final es el siguiente:
