Angular Academy · Lección

Outputs con output()

Emita eventos con la nueva API output.

Outputs con output() es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Outputs de la era de las signals

Junto con los inputs signal, Angular moderno proporciona la función output() para declarar eventos de componentes, reemplazando la combinación clásica de @Output con EventEmitter.

Declaración de un output

Llame a output() para crear un evento que el componente pueda emitir. Proporcione un tipo genérico para la carga útil.

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Emisión de un evento

Llame a emit en el output para enviar un valor a los receptores.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Escucha desde el padre

El padre se suscribe mediante la vinculación de eventos y usa $event para acceder a la carga útil emitida.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Outputs sin carga útil

Para los eventos que no transportan datos, use output<void>() y emita sin argumentos.

closed = output<void>();

close() {
  this.closed.emit();
}

output frente a EventEmitter

La API output() es más sencilla y no está vinculada a RxJS. No tiene que crear una instancia de EventEmitter; la función lo hace por usted.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Asignación de un alias a un output

Exponga un nombre de evento público diferente con la opción alias.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Outputs y vinculación bidireccional

Combinar un input con un output llamado xChange permite la vinculación bidireccional, aunque model() lo hace de forma más concisa.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Derivación de outputs a partir de observables

El helper de interoperabilidad outputFromObservable convierte un Observable en un output, conectando los streams de RxJS con la nueva API.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Seguridad de tipos

Como los outputs tienen tipos, el parámetro del controlador del padre se comprueba con respecto al tipo de la carga útil emitida, lo que detecta incompatibilidades en tiempo de compilación.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

Cuándo usar output

Prefiera output() para los componentes nuevos: es más ligero, seguro respecto a los tipos y se combina de forma natural con los inputs signal para modelar la comunicación entre componentes.

Comprobación rápida

Compruebe su comprensión de la función output.

Resumen

La función output() declara eventos con tipos sin usar un EventEmitter. Emita con emit(), escuche mediante la vinculación de eventos y $event, use alias cuando sea necesario y combínela con inputs signal para lograr una comunicación clara entre componentes.

Preguntas frecuentes

¿La lección «Outputs con output()» es gratis?

Sí — el texto completo de «Outputs con output()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Outputs con output()»?

Emita eventos con la nueva API output. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Outputs con output()»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy