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.