Comprendiendo el Uso del @Output() en Angular

Angular es un marco de trabajo popular para el desarrollo de aplicaciones web. Una característica que a menudo se pasa por alto, pero que es fundamental para lograr una arquitectura segura y mantenible, es la comunicación entre componentes. Más específicamente, la transferencia de datos del componente hijo al componente padre. Para este propósito, Angular ofrece un decorador llamado @Output().

El decorador @Output() en Angular permite que un componente hijo emita eventos a un componente padre. Esta es una manera de transferir datos del componente hijo al componente padre. Generalmente, el decorador @Output() se utiliza junto con el objeto EventEmitter, que es una forma de emitir eventos personalizados.

Veamos un ejemplo sencillo para entenderlo mejor:

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

export class HijoComponent {
  @Output() cambioEnHijo = new EventEmitter<string>();
  
  cambiaDatos() {
    this.cambioEnHijo.emit('Nuevos Datos');
  }
}

En este ejemplo, cuando se llama a la función cambiaDatos(), emitimos un evento llamado cambioEnHijo con la carga útil de 'Nuevos Datos'. Ahora bien, nuestro componente padre puede escuchar este evento y hacer algo al respecto:

import { HijoComponent } from './hijo.component';

export class PadreComponent {
  escuchaCambios(event) {
    console.log('El hijo dice:', event);
  }
}

Y en la plantilla del componente padre tendríamos algo similar a esto:

<hijo-component (cambioEnHijo)="escuchaCambios($event)"></hijo-component>

En resumen, @Output() es una herramienta poderosa y flexible en Angular que nos permite manejar la comunicación entre componentes de manera efectiva. Cabe señalar que aunque es posible utilizar otros métodos para pasar datos entre componentes, el uso de @Output() y EventEmitter es la práctica recomendada por la documentación oficial de Angular, debido a su simplicidad y potencia.