Outputs – Angular 2+

Hola a todos, hoy os voy a explicar como funcionan los outputs en Angular2+.

Ya vimos el tema de los inputs, os dejo el manual por aquí:

Inputs – Angular 2+

Los outputs en angular sirven para comunicar el componente hijo con el componente padre, haciendo que lance un evento que el padre puede recoger.

Retomemos el ejemplo de los Inputs y vamos a agregarle la comunicación con el padre.

Lo que haremos sera modificar el child.component.

Vamos a añadirle lo siguiente:

@Output() returnMessage: EventEmitter<string>;

En el constructor, lo debemos crear:

 constructor() { 
   this.returnMessage = new EventEmitter<string>();
 }

En el HTML, vamos a crear un botón para añadir un evento que al pulsar emitamos un mensaje al padre:

<button (click)="llamarPadre($event)">Mandar mensaje al padre</button>

En el ts, creamos la función:

  llamarPadre($event){
    this.returnMessage.emit("Mensaje desde el hijo al padre del componente " + this.name);
  }

Así quedaría el componente:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() name: string;
  @Input() message: string;

  @Output() returnMessage: EventEmitter<string>;

  constructor() { 
    this.returnMessage = new EventEmitter<string>();
  }

  ngOnInit() {
  }

  llamarPadre($event){
    this.returnMessage.emit("Mensaje desde el hijo al padre del componente " + this.name);
  }

}

Ahora debemos hacer que el padre escuche al hijo, eso lo hacemos con (nombre_output) cuando hacemos la llamada de un componente.

   <app-child 
       [name]="nameComponent1" 
       [message]="messageComponent1" 
       (returnMessage)="recibirMensaje($event)"></app-child>

Asi se queda en el HTML. Crearos un atributo llamado mensajeHijo de tipo string en el ts.

<div>
  <h1>Padre</h1>

  <p>Mensaje recibido: {{mensajeHijo}}</p>

  <div>
    <h1>Hijo 1</h1>
    <app-child 
       [name]="nameComponent1" 
       [message]="messageComponent1" 
       (returnMessage)="recibirMensaje($event)"></app-child>
  </div>

  <div>
    <h1>Hijo 2</h1>
    <app-child 
       name="Hijo 2" 
       message="Este es el componente 2" 
       (returnMessage)="recibirMensaje($event)"></app-child>
  </div>


</div>

En el ts, vamos a crear la función que llamamos al recibir el evento:

recibirMensaje($event){
  this.mensajeHijo = $event;
}

Os dejo el ejemplo completo en stackblizt:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.