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.

Practice

1. Why is component communication important in Angular applications?

easy

A. It helps components to load faster independently.

B. It allows components to share data and work together smoothly.

C. It prevents components from being reused.

D. It makes components run without Angular framework.

Solution

1. Step 1: Understand component roles

   Components often need to share data to build a complete UI.

2. Step 2: Recognize communication purpose

   Sharing data helps components work together smoothly and stay in sync.

3. Final Answer:

   It allows components to share data and work together smoothly. -> Option B

4. Quick Check:

   Component communication = sharing data [OK]

Hint: Communication means sharing data between components [OK]

Common Mistakes:

• Thinking components work best completely isolated
• Confusing communication with performance optimization
• Believing Angular runs components without communication

2. Which syntax correctly passes data from a parent to a child component in Angular?

easy

A. <child-comp *data="parentData"></child-comp>

B. <child-comp (data)="parentData"></child-comp>

C. <child-comp #data="parentData"></child-comp>

D. <child-comp [data]="parentData"></child-comp>

Solution

1. Step 1: Identify Angular input binding syntax

   Angular uses square brackets [] to bind data from parent to child.

2. Step 2: Match syntax to data passing

   [data]="parentData" correctly passes parentData to child's @Input() property.

3. Final Answer:

   <child-comp [data]="parentData"></child-comp> -> Option D

4. Quick Check:

   Parent to child uses [property] binding [OK]

Hint: Use square brackets [] for parent to child data [OK]

Common Mistakes:

• Using parentheses () which are for event binding
• Using template reference # incorrectly
• Using structural directive * wrongly

3. Given this parent and child component code, what will be logged when the child emits an event?

Child component TS:
@Output() notify = new EventEmitter<string>();
sendNotification() { this.notify.emit('Hello'); }

Parent component template:
<child-comp (notify)="onNotify($event)"></child-comp>

Parent component TS:
onNotify(message: string) { console.log(message); }

medium

A. Hello

B. undefined

C. Error: notify is not a function

D. No output

Solution

1. Step 1: Understand event emission

   The child emits 'Hello' via notify.emit('Hello').

2. Step 2: Check parent event binding

   The parent listens with (notify)="onNotify($event)", so onNotify receives 'Hello'.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Child event emits 'Hello' caught by parent [OK]

Hint: Child emits event, parent listens with (event) binding [OK]

Common Mistakes:

• Confusing @Output with @Input
• Not passing $event in parent handler
• Expecting no output without calling emit

4. What is wrong with this Angular code for passing data from parent to child?

Parent template:
<child-comp data="parentData"></child-comp>

Child component TS:
@Input() data: string;

medium

A. The parent should use parentheses: (data)="parentData".

B. The child should use @Output() instead of @Input().

C. The parent should use square brackets: [data]="parentData".

D. The child should declare data as a function, not a property.

Solution

1. Step 1: Identify correct binding syntax

   Passing data from parent to child requires property binding with square brackets.

2. Step 2: Analyze given code

   Using data="parentData" passes a string literal, not the variable value.

3. Final Answer:

   The parent should use square brackets: [data]="parentData". -> Option C

4. Quick Check:

   Property binding needs [] around attribute [OK]

Hint: Use [] for passing variables, not quotes [OK]

Common Mistakes:

• Using string literals instead of variable binding
• Confusing @Input and @Output decorators
• Using event binding () for data input

5. You have two unrelated Angular components that need to share user login status. Which approach is best to communicate this data?

hard

A. Use a shared service with an observable to hold and broadcast the login status.

B. Pass data directly using @Input() and @Output() between the two components.

C. Use local variables inside each component without communication.

D. Use template reference variables to share data between components.

Solution

1. Step 1: Identify component relationship

   Unrelated components do not have parent-child relation, so @Input/@Output won't work.

2. Step 2: Choose communication method

   A shared service with an observable allows broadcasting data to any component.

3. Final Answer:

   Use a shared service with an observable to hold and broadcast the login status. -> Option A

4. Quick Check:

   Unrelated components communicate via shared service [OK]

Hint: Use shared service for unrelated component communication [OK]

Common Mistakes:

• Trying to use @Input/@Output between unrelated components
• Using local variables that don't share data
• Misusing template reference variables for communication