¿Qués es un decorador en Angular ? @Input y @Output

Un decorador es una función especial en Angular que se aplica a una clase, método o propiedad de una clase. Los decoradores son una forma de añadir metadatos a una clase o a sus miembros, lo que permite que Angular pueda procesar esa información y utilizarla para realizar tareas específicas.

Por ejemplo, un decorador puede utilizarse para especificar que una clase debe inyectarse como un servicio en Angular, o que un método debe ejecutarse cuando se envía una solicitud HTTP a un determinado endpoint. Los decoradores son una herramienta poderosa en Angular y se utilizan en muchas partes del framework.

Para utilizar un decorador en Angular, primero debes importar el decorador desde un módulo o paquete que lo proporcione. A continuación, puedes aplicar el decorador a una clase, método o propiedad de una clase, precediéndolo con el símbolo @. Por ejemplo:

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  // ...
}

En este ejemplo, se está utilizando el decorador @Injectable para marcar la clase MyService como un servicio inyectable en Angular. Esto significa que puede ser inyectado en otros componentes o servicios a través del sistema de inyección de dependencias de Angular.

Es importante tener en cuenta que los decoradores son una característica de TypeScript, no de Angular. Angular utiliza los decoradores para procesar metadatos y realizar tareas específicas en tiempo de compilación, pero los decoradores no se utilizan en el código JavaScript compilado final.

@Output en Angular

El decorador @Output en Angular se utiliza para marcar una propiedad de un componente como un evento que puede ser emitido hacia el componente padre. Esto permite que el componente hijo envíe mensajes o notificaciones al componente padre, lo que le permite comunicarse con otros componentes de la aplicación.

Para utilizar el decorador @Output, primero debes importarlo desde el módulo @angular/core.
A continuación, puedes aplicarlo a una propiedad de un componente precediéndola con el símbolo @. Por ejemplo:

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

@Component({
  // ...
})
export class MyComponent {
  @Output() myEvent = new EventEmitter<string>();

  // ...
}

En este ejemplo, se ha creado una propiedad myEvent que es marcada con el decorador @Output. Esta propiedad es una instancia de EventEmitter, lo que significa que puede emitir eventos hacia el componente padre.
Para emitir un evento, simplemente debes llamar al método emit del EventEmitter y pasarle los datos que quieres enviar como argumento.

Para escuchar el evento en el componente padre, debes utilizar el enlace de eventos en el template del componente padre. Por ejemplo:

<my-component (myEvent)="onMyEvent($event)"></my-component>

En este ejemplo, se está utilizando el enlace de eventos para escuchar el evento myEvent emitido por el componente hijo.

Cuando se emita el evento, se llamará al método onMyEvent del componente padre y se le pasará el evento como argumento. De esta manera, el componente padre puede reaccionar al evento y realizar cualquier acción necesaria.

@Input en Angular

El decorador @Input en Angular se utiliza para marcar una propiedad de un componente como una entrada que puede recibir valores desde el componente padre.
Esto permite que el componente hijo reciba datos o valores del componente padre, lo que le permite adaptarse a diferentes entornos y usos.

Para utilizar el decorador @Input, primero debes importarlo desde el módulo @angular/core.
A continuación, puedes aplicarlo a una propiedad de un componente precediéndola con el símbolo @. Por ejemplo:

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

@Component({
  // ...
})
export class MyComponent {
  @Input() myInput: string;

  // ...
}

En este ejemplo, se ha creado una propiedad myInput que es marcada con el decorador @Input.
Esta propiedad puede recibir valores desde el componente padre a través del enlace de propiedades en el template del componente padre. Por ejemplo:

<my-component [myInput]="parentValue"></my-component>

En este ejemplo, se está utilizando el enlace de propiedades para enviar el valor de la propiedad parentValue del componente padre al componente hijo. De esta manera, el componente hijo puede recibir y utilizar los datos proporcionados por el componente padre.

Es importante tener en cuenta que el decorador @Input sólo se utiliza para enviar valores desde el componente padre al componente hijo. Si quieres enviar valores desde el componente hijo al componente padre, debes utilizar el decorador @Output y el enlace de eventos en su lugar.