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.