Angular Academy · Lesson

Outputs with output()

Emit events with the new output API.

Outputs with output() is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Signal-Era Outputs

Alongside signal inputs, modern Angular provides the output() function to declare component events, replacing the classic @Output with EventEmitter.

Declaring an Output

Call output() to create an event a component can emit. Provide a generic type for the payload.

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

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

Emitting an Event

Call emit on the output to send a value to listeners.

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

Listening from the Parent

The parent subscribes with event binding, using $event for the emitted payload.

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

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

Outputs Without a Payload

For events that carry no data, use output<void>() and emit with no argument.

closed = output<void>();

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

output vs EventEmitter

The output() API is simpler and not tied to RxJS. You do not create an EventEmitter instance; the function does it for you.

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

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

Aliasing an Output

Expose a different public event name with the alias option.

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

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

Outputs and Two-Way Binding

Pairing an input with an output named xChange enables two-way binding, though model() does this more concisely.

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

Deriving Outputs from Observables

The interop helper outputFromObservable turns an Observable into an output, bridging RxJS streams to the new API.

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

clicks = outputFromObservable(this.clicks$);

Type Safety

Because outputs are typed, the parent handler parameter is checked against the emitted payload type, catching mismatches at compile time.

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

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

When to Use output

Prefer output() for new components: it is lighter, type-safe, and pairs naturally with signal inputs to model component communication.

Quick Check

Test your understanding of the output function.

Recap

The output() function declares typed events without an EventEmitter. Emit with emit(), listen via event binding and $event, alias when needed, and pair with signal inputs for clean component communication.

Frequently asked questions

Is the “Outputs with output()” lesson free?

Yes — the full text of “Outputs with output()” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Outputs with output()”?

Emit events with the new output API. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Outputs with output()” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy