Angular Output and EventEmitter

What is Output and EventEmitter in Angular?

@Output exposes a custom event a child can emit, and the parent listens with event binding. Together with @Input it forms the standard parent-child communication pair.

Output and EventEmitter example

export class JobCardComponent {
  @Input({ required: true }) job!: Job;
  @Output() applied = new EventEmitter<string>();
  @Output() saved = new EventEmitter<{ id: string; saved: boolean }>();

  onApply(): void {
    this.applied.emit(this.job.id);
  }
}

Listening in the parent

<app-job-card [job]="job" (applied)="handleApply($event)" (saved)="handleSave($event)" />

$event carries whatever the child passed to emit — here a job id string, or an object for the saved event.

Key points to remember

• Name outputs as things that happened (applied, saved), not as commands.
• The generic parameter types the payload, so $event is typed in the parent.
• An output named xChange combined with an @Input x enables [(x)] two-way binding.

Common mistakes with Output and EventEmitter

• Emitting inside ngOnInit before the parent has bound its listener.
• Passing a callback down as an @Input instead of using an output — it works but fights the framework.