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.