ngOnChanges for input changes in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle hook interface for detecting input changes.

Angular

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

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

AOnChanges

BOnInit

CDoCheck

DAfterViewInit

Attempts:

3 left

💡 Hint

Common Mistakes

Importing OnInit instead of OnChanges

Forgetting to import any lifecycle hook

Using AfterViewInit which is for view initialization

The OnChanges interface is used to detect changes to input properties in Angular components.

2fill in blank

medium

Complete the component class declaration to implement the interface for input change detection.

Angular

export class MyComponent implements [1] {

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

AAfterContentInit

BOnInit

COnChanges

DDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Implementing OnInit instead of OnChanges

Not implementing any interface

Using DoCheck which is a different lifecycle hook

Implementing OnChanges allows the component to respond when input properties change.

3fill in blank

hard

Fix the error in the method signature to correctly detect input changes.

Angular

ngOnChanges([1]: SimpleChanges) { console.log('Input changed'); }

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

Achanges

Bevent

Cinput

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' which is not the correct parameter name

Using 'input' or 'change' which are not standard names

The parameter name is conventionally changes and it holds the changes to input properties.

4fill in blank

hard

Fill both blanks to declare an input property and detect its changes.

Angular

@Input() [1]: string;

ngOnChanges(changes: [2]) {
  if (changes.[1]) {
    console.log('Value changed:', changes.[1].currentValue);
  }
}

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

Atitle

BSimpleChanges

CEventEmitter

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using EventEmitter instead of SimpleChanges

Mismatching input property name in ngOnChanges

Using string as the type for changes parameter

The input property is named 'title'. The ngOnChanges method receives a SimpleChanges object to track changes.

5fill in blank

hard

Fill all three blanks to create a component that logs changes to an input property named 'count'.

Angular

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

@Component({ selector: 'app-counter', template: '<p>{{count}}</p>' })
export class CounterComponent implements [2] {
  @Input() [3]: number = 0;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.count) {
      console.log('Count changed to', changes.count.currentValue);
    }
  }
}

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

AOnChanges

Ccount

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for input property and in ngOnChanges

Not implementing OnChanges interface

Importing wrong lifecycle hook

The component imports and implements OnChanges. The input property is named 'count' to track changes.

Practice

1. What is the primary purpose of the ngOnChanges lifecycle hook in Angular?

easy

A. To handle user events like clicks

B. To initialize component variables after creation

C. To respond whenever an input property changes value

D. To destroy the component before removal

Solution

1. Step 1: Understand the role of ngOnChanges

   The ngOnChanges hook is called when Angular detects changes to input properties of a component.

2. Step 2: Compare with other lifecycle hooks

   Other hooks like ngOnInit initialize data, but ngOnChanges specifically reacts to input changes.

3. Final Answer:

   To respond whenever an input property changes value -> Option C

4. Quick Check:

   ngOnChanges = input change response [OK]

Hint: ngOnChanges runs when inputs change, not on init [OK]

Common Mistakes:

• Confusing ngOnChanges with ngOnInit
• Thinking it handles user events
• Assuming it runs on component destruction

2. Which of the following is the correct method signature for ngOnChanges in an Angular component?

easy

A. ngOnChanges(changes: SimpleChanges): void

B. ngOnChanges(): void

C. ngOnChanges(changes: ChangeDetectorRef): void

D. ngOnChanges(event: Event): void

Solution

1. Step 1: Recall the ngOnChanges signature

   The ngOnChanges method receives a parameter of type SimpleChanges which holds the changes.

2. Step 2: Verify parameter type and return

   The method returns void and the parameter must be SimpleChanges, not other types.

3. Final Answer:

   ngOnChanges(changes: SimpleChanges): void -> Option A

4. Quick Check:

   ngOnChanges(SimpleChanges) = correct signature [OK]

Hint: ngOnChanges always takes SimpleChanges parameter [OK]

Common Mistakes:

• Omitting the parameter
• Using wrong parameter types
• Adding event or unrelated parameters

3. Given this Angular component snippet:

export class MyComponent implements OnChanges {
  @Input() count = 0;
  changesLog: string[] = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['count']) {
      this.changesLog.push(`Count changed from ${changes['count'].previousValue} to ${changes['count'].currentValue}`);
    }
  }
}

What will be the content of changesLog after the input count changes from 5 to 10?

medium

A. ["Count changed from 0 to 10"]

B. ["Count changed from 5 to 10"]

C. [] (empty array)

D. ["Count changed from undefined to 10"]

Solution

1. Step 1: Understand SimpleChanges values

   The changes['count'] object has previousValue and currentValue reflecting old and new input values.

2. Step 2: Apply given input change

   When count changes from 5 to 10, previousValue is 5 and currentValue is 10, so the string is pushed accordingly.

3. Final Answer:

   ["Count changed from 5 to 10"] -> Option B

4. Quick Check:

   previousValue=5, currentValue=10 [OK]

Hint: previousValue and currentValue show old and new input [OK]

Common Mistakes:

• Assuming previousValue is always 0
• Expecting empty changesLog on input change
• Confusing previousValue with undefined

4. Identify the error in this Angular component code using ngOnChanges:

export class TestComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges() {
    console.log(this.data);
  }
}

medium

A. ngOnChanges must have a parameter of type SimpleChanges

B. The @Input decorator is missing parentheses

C. ngOnChanges should return a value

D. data property must be initialized

Solution

1. Step 1: Check ngOnChanges method signature

   The ngOnChanges method must accept a parameter of type SimpleChanges to receive input changes.

2. Step 2: Verify other parts

   The @Input decorator syntax is correct, no return value is needed, and data can be uninitialized initially.

3. Final Answer:

   ngOnChanges must have a parameter of type SimpleChanges -> Option A

4. Quick Check:

   ngOnChanges(SimpleChanges) required [OK]

Hint: Always include SimpleChanges parameter in ngOnChanges [OK]

Common Mistakes:

• Omitting the SimpleChanges parameter
• Expecting ngOnChanges to return a value
• Misusing @Input decorator syntax

5. You want to reset a component's internal counter to zero whenever the input resetFlag changes from false to true. Which ngOnChanges implementation correctly achieves this?

export class CounterComponent implements OnChanges {
  @Input() resetFlag = false;
  @Input() otherValue: number = 0;
  counter = 10;

  ngOnChanges(changes: SimpleChanges) {
    // Which option resets counter correctly?
  }
}

hard

A. if (this.resetFlag) { this.counter = 0; }

B. if (changes['resetFlag'] && changes['resetFlag'].previousValue === true) { this.counter = 0; }

C. if (changes['resetFlag'].previousValue === false) { this.counter = 0; }

D. if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; }

Solution

1. Step 1: Detect resetFlag input change to true

   We must check if resetFlag changed and its new value is true.

2. Step 2: Verify condition logic

   if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; } checks both existence of change and currentValue === true, correctly resetting counter.

3. Step 3: Analyze other options

   if (this.resetFlag) { this.counter = 0; } checks current value but runs on any input change, incorrectly resetting if resetFlag is true when other inputs change. if (changes['resetFlag'].previousValue === false) { this.counter = 0; } accesses changes['resetFlag'] without checking existence, causing runtime error when other inputs change. if (changes['resetFlag'] && changes['resetFlag'].previousValue === true) { this.counter = 0; } checks previous true, wrong condition.

4. Final Answer:

   if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; } -> Option D

5. Quick Check:

   Check currentValue true on input change [OK]

Hint: Check currentValue === true in changes to reset [OK]

Common Mistakes:

• Ignoring previousValue and currentValue difference
• Resetting counter on wrong condition
• Not checking if changes object has resetFlag