Child to parent communication flow in Angular - Step-by-Step Execution

Concept Flow - Child to parent communication flow

Child Component Event

↓

Emit Event with Data

↓

Parent Listens to Event

↓

Parent Receives Data

↓

Parent Updates State or Reacts

The child component sends data by emitting an event, which the parent listens to and uses to update its state or perform actions.

Execution Sample

Angular

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

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

  sendNotification() {
    this.notify.emit('Hello Parent');
  }
}

/* Parent Template */
<app-child (notify)="onNotify($event)"></app-child>

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

@Component({
  selector: 'app-parent',
  template: `<app-child (notify)="onNotify($event)"></app-child>`
})
export class ParentComponent {
  onNotify(message: string) {
    console.log(message);
  }
}

Child emits a string event; parent listens and handles the event with a method.

Execution Table

Step	Action	Component	Event/Data	Parent Reaction
1	Child creates EventEmitter	Child	EventEmitter<string>	No action yet
2	Child calls emit('Hello Parent')	Child	'Hello Parent'	Parent event handler triggered
3	Parent receives event with data	Parent	'Hello Parent'	Parent method onNotify called with data
4	Parent updates state or UI	Parent	N/A	State updated or UI refreshed
5	No further events	Child & Parent	N/A	Flow ends

💡 No more events emitted; communication cycle completes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
notify (EventEmitter)	Created	Emitted 'Hello Parent'	Event received by parent	Ready for next emit
parentData	undefined	undefined	'Hello Parent'	'Hello Parent'

Key Moments - 3 Insights

How does the parent know when the child sends data?

The parent listens to the child's event using (notify) in the template, as shown in execution_table step 3.

What type of data can the child send to the parent?

The child can send any data type through the EventEmitter; here it sends a string 'Hello Parent' as in step 2.

Does the child directly change the parent's state?

No, the child only emits an event; the parent decides how to react and update its state, as in step 4.

Visual Quiz - 3 Questions

Look at the execution table, what data does the child emit at step 2?

A undefined

B 'Hello Child'

C 'Hello Parent'

D null

💡 Hint

Check the 'Event/Data' column at step 2 in the execution_table.

At which step does the parent receive the event from the child?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look for when the parent event handler is triggered in the execution_table.

If the child emits a number instead of a string, what changes in the execution table?

A The parent reaction at step 4 will be skipped

B The 'Event/Data' column at step 2 shows the number emitted

C The parent will not receive the event

D The EventEmitter will not be created

💡 Hint

Focus on the 'Event/Data' column at step 2 and how data is passed.

Concept Snapshot

Child to parent communication in Angular:
- Child defines @Output() EventEmitter
- Child emits event with data using emit()
- Parent listens with (eventName) in template
- Parent method receives data via $event
- Parent updates state or UI accordingly

Full Transcript

In Angular, child to parent communication happens by the child component emitting an event using an EventEmitter decorated with @Output. The parent listens to this event in its template using parentheses syntax, for example (notify). When the child calls emit with some data, the parent receives this data in the event handler method. The parent can then update its state or UI based on the received data. This flow ensures clear separation: the child only sends events, and the parent decides how to react. The execution table shows each step: creating the EventEmitter, emitting data, parent receiving it, and updating state. Variables like the EventEmitter and parent data change accordingly. Common confusions include how the parent listens, what data can be sent, and that the child does not directly change the parent's state. The visual quiz tests understanding of these steps and data flow.

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