Transmisión de datos al componente padre en Angular

Se pueden transmitir datos desde un componente hijo a un componente padre. Esto se realiza emitiendo eventos usando un objeto especial EventEmitter y el método emit. El componente hijo emitirá eventos, transmitiendo algunos datos junto con el evento, y el componente padre capturará los eventos, obteniendo los datos del componente hijo.

Probemos esto en la práctica. Para ello necesitamos realizar una serie de pasos. Primero, en nuestro componente hijo importemos el decorador @Output y la clase EventEmitter:

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

Ahora en la clase hija creemos una propiedad onData, cuyo valor será un nuevo objeto EventEmitter, que contendrá una cadena:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

Ahora creemos un método send, cuya llamada emitirá un evento onData al componente padre con el texto dado:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

En la plantilla del componente hijo creemos un botón, al hacer clic en el cual se llamará al método send:

<button (click)="send()">
	enviar datos
</button>

En el componente padre creemos un método onData, que se llamará automáticamente cuando se emita el evento correspondiente desde el componente hijo. En el parámetro del método llegarán los datos transmitidos:

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

En la plantilla del componente padre vincularemos al tag del componente hijo el evento:

<app-user (onData)="onData($event)"></app-user>

En el componente hijo, crea tres botones que emitan diferentes eventos. Captura los eventos emitidos en el componente padre.