Child to parent communication flow in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an event emitter in the child component.

Angular

import { Component, Output, [1] } from '@angular/core';

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

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

Drag options to blanks, or click blank then click option'

AInput

BEventEmitter

COutput

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Input instead of @Output for event emitter

Not importing EventEmitter

Confusing EventEmitter with Injectable

The child component uses EventEmitter to send events to the parent. You import and declare it as @Output() notify: EventEmitter.

2fill in blank

medium

Complete the parent component template to listen to the child's event.

Angular

<app-child ([1])="onNotify($event)"></app-child>
<p>{{ message }}</p>

Drag options to blanks, or click blank then click option'

Anotify

Bclick

Cinput

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using (input) instead of (notify)

Using (click) which is a DOM event, not the child's event

Using (change) which is unrelated here

The parent listens to the child's 'notify' event using (notify) in the template.

3fill in blank

hard

Fix the error in the parent component class to handle the event.

Angular

export class ParentComponent {
  message = '';

  onNotify([1]: string) {
    this.message = [1];
  }
}

Drag options to blanks, or click blank then click option'

Amsg

Bvalue

Cdata

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name but not using it inside the method

Using a parameter name that is not consistent

The event parameter name can be anything, but 'event' is common and clear. The method uses it to update the message.

4fill in blank

hard

Fill both blanks to import and declare the Output decorator and EventEmitter in the child component.

Angular

import { Component, [1], [2] } from '@angular/core';

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

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

Drag options to blanks, or click blank then click option'

AOutput

BInput

CEventEmitter

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Input instead of Output

Forgetting to import EventEmitter

Importing Injectable which is unrelated

You must import both Output and EventEmitter from '@angular/core' to declare an event emitter property.

5fill in blank

hard

Fill the two blanks to complete the parent component class that listens to the child's event and updates the message.

Angular

export class ParentComponent {
  message = '';

  [1](event: string) {
    this.[2] = event;
  }
}

Drag options to blanks, or click blank then click option'

AonNotify

Bmessage

Cnotify

DhandleEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not match the template

Updating a wrong property name

Confusing method and property names

The method name 'onNotify' matches the template listener. The property 'message' is updated with the event data.

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