@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.

Practice

1. What is the main purpose of the @Output decorator in Angular?

easy

A. To allow a child component to send events to its parent component

B. To receive data from a parent component

C. To style the component's template

D. To import external modules into the component

Solution

1. Step 1: Understand the role of @Output

   The @Output decorator is used in Angular to create a custom event that a child component can emit to notify its parent component.

2. Step 2: Differentiate from other decorators

   Unlike @Input which receives data, @Output sends events upward. It does not style or import modules.

3. Final Answer:

   To allow a child component to send events to its parent component -> Option A

4. Quick Check:

   @Output sends events from child to parent [OK]

Hint: Remember: @Output sends events up from child to parent [OK]

Common Mistakes:

• Confusing @Output with @Input
• Thinking @Output styles components
• Assuming @Output imports modules

2. Which of the following is the correct syntax to declare an @Output property named notify using EventEmitter in Angular?

easy

A. @Output() notify = new EventEmitter;

B. @Output notify = EventEmitter<string>();

C. @Output() notify = new EventEmitter<string>();

D. @Output() notify: EventEmitter<string> = EventEmitter();

Solution

1. Step 1: Recall correct EventEmitter syntax

   The correct way is to use @Output() decorator with a property initialized as new EventEmitter<type>().

2. Step 2: Check each option

   @Output() notify = new EventEmitter<string>(); correctly uses parentheses after @Output and calls new EventEmitter<string>(). Others miss parentheses or use wrong initialization.

3. Final Answer:

   @Output() notify = new EventEmitter<string>(); -> Option C

4. Quick Check:

   Use @Output() with new EventEmitter() [OK]

Hint: Always use parentheses: @Output() and new EventEmitter() [OK]

Common Mistakes:

• Omitting parentheses after @Output
• Not using 'new' keyword with EventEmitter
• Incorrect property type declaration

3. Given this child component code:

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

@Component({ selector: 'child-comp', template: `Click` })
export class ChildComponent {
  @Output() alertEvent = new EventEmitter<string>();

  sendAlert() {
    this.alertEvent.emit('Hello from child');
  }
}

What happens when the button is clicked in the parent template listening as <child-comp (alertEvent)="showMessage($event)"></child-comp>?

medium

A. The child component reloads

B. Nothing happens because alertEvent is private

C. An error occurs because emit is not a function

D. The parent method showMessage is called with 'Hello from child' as argument

Solution

1. Step 1: Understand EventEmitter usage

   The child component emits an event named alertEvent with the string 'Hello from child'.

2. Step 2: Parent listens to event

   The parent template listens to alertEvent and calls showMessage passing the emitted string as $event.

3. Final Answer:

   The parent method showMessage is called with 'Hello from child' as argument -> Option D

4. Quick Check:

   Child emits event, parent handles it [OK]

Hint: Child emits event, parent listens with (eventName) [OK]

Common Mistakes:

• Thinking emit is private or inaccessible
• Assuming child reloads on emit
• Confusing emit with method call error

4. Identify the error in this child component code:

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

@Component({ selector: 'child-comp', template: `Notify` })
export class ChildComponent {
  @Output notify = new EventEmitter<string>();

  notifyParent() {
    this.notify.emit('Data sent');
  }
}

medium

A. EventEmitter should not have a type parameter

B. Missing parentheses after @Output decorator

C. Method notifyParent should return a value

D. Template syntax for click event is incorrect

Solution

1. Step 1: Check @Output decorator syntax

   The @Output decorator must have parentheses: @Output(). Missing parentheses causes a syntax error.

2. Step 2: Verify other parts

   EventEmitter can have a type parameter, method does not need to return, and template click syntax is correct.

3. Final Answer:

   Missing parentheses after @Output decorator -> Option B

4. Quick Check:

   @Output() needs parentheses [OK]

Hint: Always write @Output() with parentheses [OK]

Common Mistakes:

• Omitting parentheses after @Output
• Thinking EventEmitter cannot have type
• Expecting method to return value unnecessarily

5. You want a child component to emit an event only when a number input is positive. Which code correctly implements this using @Output and EventEmitter?

hard

A. import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: `Send` })
export class ChildComponent {
@Output() positiveNumber = new EventEmitter<number>();
numberInput = 0;

checkAndEmit() {
if (this.numberInput > 0) {
this.positiveNumber.emit(this.numberInput);
}
}
}

B. import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: `Send` })
export class ChildComponent {
@Output() positiveNumber = new EventEmitter<number>();
numberInput = 0;

emitNumber() {
this.positiveNumber.emit(this.numberInput);
}
}

C. import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: `Send` })
export class ChildComponent {
@Output() positiveNumber = new EventEmitter<number>();
numberInput = 0;

send() {
if (this.numberInput >= 0) {
this.positiveNumber.emit(this.numberInput);
}
}
}

D. import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: `Send` })
export class ChildComponent {
@Output() positiveNumber = new EventEmitter<number>();
numberInput = 0;

sendPositive() {
if (this.numberInput < 0) {
this.positiveNumber.emit(this.numberInput);
}
}
}

Solution

1. Step 1: Understand the condition for emitting

   The event should emit only if the number input is positive, meaning greater than zero.

2. Step 2: Check each option's condition

   import { Component, Output, EventEmitter } from '@angular/core';
   @Component({ selector: 'child-comp', template: `Send` })
   export class ChildComponent {
     @Output() positiveNumber = new EventEmitter<number>();
     numberInput = 0;
   
     checkAndEmit() {
       if (this.numberInput > 0) {
         this.positiveNumber.emit(this.numberInput);
       }
     }
   }

   emits only if numberInput > 0, which matches the requirement.

   import { Component, Output, EventEmitter } from '@angular/core';
   @Component({ selector: 'child-comp', template: `Send` })
   export class ChildComponent {
     @Output() positiveNumber = new EventEmitter<number>();
     numberInput = 0;
   
     emitNumber() {
       this.positiveNumber.emit(this.numberInput);
     }
   }

   emits unconditionally.

   import { Component, Output, EventEmitter } from '@angular/core';
   @Component({ selector: 'child-comp', template: `Send` })
   export class ChildComponent {
     @Output() positiveNumber = new EventEmitter<number>();
     numberInput = 0;
   
     send() {
       if (this.numberInput >= 0) {
         this.positiveNumber.emit(this.numberInput);
       }
     }
   }

   emits if number is zero or positive (>=0), which is incorrect.

   import { Component, Output, EventEmitter } from '@angular/core';
   @Component({ selector: 'child-comp', template: `Send` })
   export class ChildComponent {
     @Output() positiveNumber = new EventEmitter<number>();
     numberInput = 0;
   
     sendPositive() {
       if (this.numberInput < 0) {
         this.positiveNumber.emit(this.numberInput);
       }
     }
   }

   emits if number is negative (<0), which is wrong.

3. Final Answer:

   Option A correctly emits only when numberInput is positive -> Option A

4. Quick Check:

   Emit only if numberInput > 0 [OK]

Hint: Emit event only inside if (numberInput > 0) block [OK]

Common Mistakes:

• Emitting event without condition
• Using >= 0 instead of > 0
• Emitting on negative numbers