Child to parent communication flow in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child component emits an event in Angular?

Consider a child component that uses @Output() with an EventEmitter. What is the expected behavior when the child emits an event?

Angular

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

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

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

Parent component template:
<app-child (notify)="onNotify($event)"></app-child>

A The parent component's <code>onNotify</code> method is called with the string 'Hello from child'.

B Angular throws an error because events cannot be emitted from child to parent.

C The event is handled only inside the child component and does not affect the parent.

D The child component directly changes the parent's state without any event.

💡 Hint

Think about how Angular uses @Output and EventEmitter to send data up.

In Angular, child components communicate with parents by emitting events using @Output() and EventEmitter. When the child emits an event, the parent listens and runs the bound method with the emitted data.

📝 Syntax

intermediate

Identify the correct syntax to declare an output event in Angular child component

Which of the following is the correct way to declare an output event named update in an Angular child component?

A @Output() update = new EventEmitter<string>();

B @Input() update = new EventEmitter<string>();

C output update = new EventEmitter<string>();

D @Output update = EventEmitter<string>();

💡 Hint

Remember the decorator name and how to instantiate EventEmitter.

The @Output() decorator marks a property as an event emitter. It must be assigned a new instance of EventEmitter. The other options misuse decorators or syntax.

🔧 Debug

advanced

Why does the parent not receive the event from the child component?

Given this parent template and child component code, why does the parent not respond when the child emits the event? Parent template: Child component: @Output() dataChange = new EventEmitter(); someMethod() { this.dataChange.emit('data'); } But handleChange is never called.

A The child component did not call <code>emit</code> inside <code>someMethod</code>.

B The parent component forgot to import the child component.

C The child component's event emitter property name does not match the event binding name in the parent template.

D Angular does not support event emitters for string data.

💡 Hint

Check if the event name in the template matches the property name in the child.

The event binding in the parent template must match exactly the @Output property name in the child. If they differ, the parent will not listen to the event.

❓ state_output

advanced

What is the value of message in the parent after child emits?

Parent component code: message = ''; handleMessage(msg: string) { this.message = msg; } Parent template: Child component: @Output() sendMessage = new EventEmitter(); send() { this.sendMessage.emit('Hi Parent'); } If the child calls send(), what is the value of message in the parent?

A undefined

B 'Hi Parent'

C '' (empty string)

D null

💡 Hint

The parent updates message when it receives the event.

The parent method handleMessage sets message to the emitted string. So after the child emits, message becomes 'Hi Parent'.

🧠 Conceptual

expert

Which Angular feature enables child to parent communication?

In Angular, what is the main feature that allows a child component to send data or signals to its parent component?

A Using services with <code>BehaviorSubject</code> only.

B Using <code>@Input()</code> decorator to pass data from child to parent.

C Directly modifying the parent's variables from the child component.

D Using <code>@Output()</code> decorator with <code>EventEmitter</code> to emit events.

💡 Hint

Think about how Angular components send events upwards.

The @Output() decorator combined with EventEmitter is the standard Angular way for child components to communicate with parents by emitting events.

Practice

1. What is the main Angular feature used for communication from a child component to its parent?

easy

A. Using ViewChild to access parent methods

B. Using @Input to send data

C. Using services with HttpClient

D. Using @Output with EventEmitter

Solution

1. Step 1: Understand child to parent communication

   Child components send data or events to parents using Angular's event system.

2. Step 2: Identify Angular feature for this

   @Output decorator with EventEmitter allows child to emit events the parent listens to.

3. Final Answer:

   Using @Output with EventEmitter -> Option D

4. Quick Check:

   Child to parent = @Output + EventEmitter [OK]

Hint: Child emits events with @Output and EventEmitter [OK]

Common Mistakes:

• Confusing @Input as child to parent communication
• Thinking services are needed for simple child to parent
• Using ViewChild to call parent methods directly

2. Which of the following is the correct syntax to declare an event emitter in a child component?

easy

A. notify = new EventEmitter<string>();

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

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

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

Solution

1. Step 1: Recall correct decorator and initialization

   Event emitters must be decorated with @Output() and initialized with new EventEmitter<type>().

2. Step 2: Check each option

   @Output() notify = new EventEmitter<string>(); correctly uses @Output() and initializes the emitter. Others miss decorator, use wrong decorator, or wrong syntax.

3. Final Answer:

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

4. Quick Check:

   @Output() + new EventEmitter() = correct syntax [OK]

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

Common Mistakes:

• Using @Input instead of @Output
• Forgetting parentheses after @Output
• Not initializing EventEmitter with new keyword

3. Given this child component code:

@Output() change = new EventEmitter<number>();
updateValue() {
  this.change.emit(42);
}

What will the parent component receive when updateValue() is called?

medium

A. An event with value 42

B. An event with value 'updateValue'

C. No event emitted

D. An error because emit needs a string

Solution

1. Step 1: Understand what emit does

   The emit method sends the given value (here 42) as an event payload to the parent.

2. Step 2: Check the emitted value type

   The emitter is typed as number and emits 42, so the parent receives 42.

3. Final Answer:

   An event with value 42 -> Option A

4. Quick Check:

   emit(42) sends 42 to parent [OK]

Hint: emit(value) sends that value to parent [OK]

Common Mistakes:

• Assuming emit sends method name instead of value
• Thinking emit requires string only
• Believing no event is sent without explicit subscription

4. Identify the error in this child component code snippet:

@Output notify = new EventEmitter<string>();
send() {
  this.notify.emit('hello');
}

medium

A. Missing parentheses after @Output decorator

B. EventEmitter should not have a type parameter

C. emit method cannot send strings

D. notify should be private

Solution

1. Step 1: Check @Output decorator syntax

   The @Output decorator requires parentheses: @Output().

2. Step 2: Verify other parts

   Type parameter on EventEmitter is allowed, emit can send strings, and notify can be public.

3. Final Answer:

   Missing parentheses after @Output decorator -> Option A

4. Quick Check:

   @Output() needs parentheses [OK]

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

Common Mistakes:

• Omitting parentheses after @Output
• Thinking EventEmitter can't have types
• Assuming emit only accepts numbers

5. You want a child component to send a complex object to its parent when a button is clicked. Which approach correctly implements this?

Child component:
@Output() sendData = new EventEmitter<{id:number, name:string}>();

onClick() {
  const data = {id: 1, name: 'Test'};
  this.sendData.emit(data);
}

Parent component template:
<app-child (sendData)="handleData($event)"></app-child>

What should the parent component's handleData method look like?

hard

A. handleData(data: number) { console.log(data); }

B. handleData(data: {id: number; name: string}) { console.log(data.name); }

C. handleData(event: string) { console.log(event); }

D. handleData() { console.log('No data received'); }

Solution

1. Step 1: Understand emitted data type

   The child emits an object with id and name properties.

2. Step 2: Match parent handler parameter

   The parent method must accept an object matching the emitted type to access properties like name.

3. Final Answer:

   handleData(data: {id: number; name: string}) { console.log(data.name); } -> Option B

4. Quick Check:

   Parent handler param matches emitted object type [OK]

Hint: Parent handler param matches emitted object shape [OK]

Common Mistakes:

• Ignoring event parameter in handler
• Using wrong parameter type in handler
• Not accessing object properties correctly