Angular Academy · Lesson

Outputs with output()

Emit events with the new output API.

Lesson 3 of 413 steps

Outputs with output() is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Angular Academy learning path, including “Outputs with output()”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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