Why component communication matters in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass data from a parent to a child component using Angular.

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>Message: {{ message }}</p>`
})
export class ChildComponent {
  @[1]() message!: string;
}

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

AOutput

BViewChild

CInjectable

DInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input for passing data from parent to child.

Forgetting to import the decorator from '@angular/core'.

Use @Input() to receive data from a parent component.

2fill in blank

medium

Complete the code to emit an event from a child component to notify the parent.

Angular

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

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

  notifyParent() {
    this.notify.[2]();
  }
}

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

AEventEmitter

Bemit

CInput

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Input instead of @Output for event emission.

Calling the wrong method instead of emit() to send the event.

EventEmitter is used to create an event, and emit() sends the event to the parent.

3fill in blank

hard

Fix the error in the parent component template to listen to the child's event.

Angular

<app-child ([1])="onNotify()"></app-child>

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

Anotify

BnotifyParent

CnotifyChange

DnotifyEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong event name that does not match the child's @Output property.

Confusing method names with event names.

The event name matches the @Output() property name in the child component, which is notify.

4fill in blank

hard

Fill both blanks to create a two-way binding between parent and child components.

Angular

<app-child [( [1] )]="[2]"></app-child>

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

Avalue

BchildValue

Cmessage

DparentMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up child property and parent variable names.

Using one-way binding syntax instead of two-way binding.

Two-way binding uses the property name inside [( )] and the parent component's variable to bind data.

5fill in blank

hard

Fill all three blanks to create a reactive signal in Angular and update it on button click.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="[2]()">Increment</button>
  `
})
export class CounterComponent {
  count = [3](0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

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

Asignal

Bincrement

Csignal()

Dinject

Attempts:

3 left

💡 Hint

Common Mistakes

Not calling the signal as a function in the template.

Forgetting to import or use the signal function correctly.

Angular signals are created with signal(). The method increment() updates the signal. The template calls count() to get the current value.