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:

Mandar mensaje al padre

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);
}

}
[/typescript]

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

[name]=»nameComponent1″
[message]=»messageComponent1″
(returnMessage)=»recibirMensaje($event)»>

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

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.