@Output decorator with EventEmitter in Angular - Step-by-Step Execution

Concept Flow - @Output decorator with EventEmitter

Child Component Event Occurs

↓

Emit Event with EventEmitter

↓

Parent Component Listens (@Output)

↓

Parent Handles Event (calls method)

↓

Update Parent State or UI

The child component emits an event using EventEmitter. The parent listens with @Output and reacts when the event fires.

Execution Sample

Angular

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

@Component({ selector: 'child-comp', template: `<button (click)="notify()">Click me</button>` })
export class ChildComponent {
  @Output() clicked = new EventEmitter<string>();
  notify() { this.clicked.emit('Hello from child'); }
}

Child component emits a string event when button is clicked.

Execution Table

Step	Action	EventEmitter State	Parent Listener Reaction	Output
1	Child button clicked	clicked emits 'Hello from child'	Parent receives event	Parent method called with 'Hello from child'
2	Parent updates message	No change	Message updated to 'Hello from child'	UI shows updated message
3	No further clicks	No change	No event	No UI change

💡 No more clicks, event emission stops

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
clicked (EventEmitter)	empty	'Hello from child' emitted	no new emission	no new emission
parentMessage	'' (empty)	'' (unchanged)	'Hello from child'	'Hello from child'

Key Moments - 3 Insights

Why does the parent component receive the event when the child emits it?

Because the child uses @Output with EventEmitter, and the parent binds to that event in the template, so Angular connects them. See execution_table step 1 where the event is emitted and parent reacts.

What happens if the child emits multiple times?

Each emit triggers the parent listener again, updating the parent state each time. The variable_tracker shows how 'clicked' emits new values and parentMessage updates accordingly.

Can the parent listen without @Output in the child?

No, @Output is required to expose the event for the parent to bind. Without it, the event is private to the child and parent won't react.

Visual Quiz - 3 Questions

Look at the execution_table at Step 1, what does the EventEmitter emit?

A No event emitted

B 'Clicked button'

C 'Hello from child'

D 'Parent updated'

💡 Hint

Check the 'EventEmitter State' column in execution_table row for Step 1

At which step does the parent update its message variable?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at 'Parent Listener Reaction' and 'Output' columns in execution_table

If the child never emits, what happens to parentMessage?

A It stays empty

B It updates to 'Hello from child'

C It becomes undefined

D It throws an error

💡 Hint

See variable_tracker for parentMessage initial and final values

Concept Snapshot

@Output decorator exposes an EventEmitter from child to parent.
Child calls emit() to send event data.
Parent listens with (eventName) in template.
Parent reacts by running a method or updating state.
This enables child-to-parent communication in Angular.

Full Transcript

In Angular, the @Output decorator marks a property as an event the child component can send to its parent. This property is an EventEmitter instance. When the child calls emit() on this EventEmitter, it sends data out. The parent listens to this event by binding to it in the template, like <child-comp (clicked)="parentMethod($event)">. When the event fires, the parent method runs and can update its state or UI. This flow allows child components to notify parents about actions or changes. The execution table shows the child emitting 'Hello from child' on button click, the parent receiving it, and updating a message variable. The variable tracker shows how the EventEmitter and parentMessage change over time. Key points are that @Output is required to expose the event, and each emit triggers the parent listener. If the child never emits, the parent state stays unchanged.