@Output decorator with EventEmitter in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the child component emits an event?

Consider a child Angular component that uses @Output with EventEmitter. When the child emits an event, what will the parent component receive?

Angular

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

@Component({
  selector: 'app-child',
  template: `<button (click)="notify()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notifyEvent = new EventEmitter<string>();

  notify() {
    this.notifyEvent.emit('Hello from child');
  }
}

A The parent receives no data because EventEmitter does not send data by default.

B The parent receives an object with a property named 'notifyEvent'.

C The parent receives the string 'Hello from child' through the event binding.

D The parent receives a boolean value true indicating the event fired.

💡 Hint

Think about what emit() sends and how the parent listens.

The @Output decorator with EventEmitter allows the child to send data to the parent. When emit() is called with a value, the parent receives that exact value through event binding.

📝 Syntax

intermediate

Identify the correct syntax to declare an @Output EventEmitter

Which of the following is the correct way to declare an @Output property named changeEvent that emits numbers?

A @Output changeEvent = EventEmitter<number>();

B @Output() changeEvent = new EventEmitter<number>();

C @Output() changeEvent: EventEmitter = new EventEmitter();

D @Output() changeEvent = new EventEmitter<string>();

💡 Hint

Remember the syntax requires parentheses after @Output and the type inside EventEmitter<>.

The correct syntax uses @Output() with parentheses and initializes the property with new EventEmitter<number>(). Option B matches this exactly.

🔧 Debug

advanced

Why does the parent not receive the event?

Given the child component below, the parent component does not receive any event when the button is clicked. What is the most likely cause?

Angular

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

@Component({
  selector: 'app-child',
  template: `<button (click)="send()">Send</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  send() {
    this.notify.emit('data');
  }
}

A The @Output decorator is missing parentheses.

B The EventEmitter is not initialized with parentheses after new.

C The child component's selector is incorrect.

D The parent is not listening to the event with the correct selector name.

💡 Hint

Check how the parent binds to the child's output event name.

The child emits an event named 'notify'. If the parent listens to a different event name, it won't receive the event. The other options are syntactically correct.

❓ state_output

advanced

What is the value of the parent's message after event emission?

In the parent component, the message property updates when the child emits an event. What will be the value of message after clicking the button?

Angular

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

@Component({
  selector: 'app-child',
  template: `<button (click)="send()">Send</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();
  send() {
    this.notify.emit('Angular Rocks!');
  }
}

/* Parent component */
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child (notify)="message = $event"></app-child><p>{{ message }}</p>`
})
export class ParentComponent {
  message = 'No message yet';
}

A 'Angular Rocks!'

B 'No message yet'

C undefined

D An empty string ''

💡 Hint

Consider what $event contains when the child emits.

The child emits the string 'Angular Rocks!'. The parent listens to the notify event and sets message to the emitted value, so it updates to 'Angular Rocks!'.

🧠 Conceptual

expert

What error occurs if EventEmitter is not imported?

If you forget to import EventEmitter from @angular/core but still declare @Output() event = new EventEmitter();, what error will Angular throw during compilation?

A TS2304: Cannot find name 'EventEmitter'.

B Template parse error: 'event' is not a known property.

C No error; Angular automatically imports EventEmitter.

D Runtime error: 'event' is not a function.

💡 Hint

Think about TypeScript errors when a class is used but not imported.

If EventEmitter is not imported, TypeScript cannot find its definition and throws error TS2304 during compilation.

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