Why lifecycle hooks matter in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle hook interface for initialization.

Angular

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

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

AOnInit

BOnDestroy

CDoCheck

DAfterViewInit

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing lifecycle hooks that run later like OnDestroy or AfterViewInit.

Forgetting to import the interface.

The OnInit interface is used to run code when the component initializes.

2fill in blank

medium

Complete the code to implement the lifecycle hook method that runs after component initialization.

Angular

export class MyComponent implements OnInit {
  [1]() {
    console.log('Component initialized');
  }
}

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

AngOnDestroy

BngDoCheck

CngAfterViewInit

DngOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngOnDestroy which runs when the component is removed.

Using ngAfterViewInit which runs after the view is ready.

The method ngOnInit runs once after the component is created and initialized.

3fill in blank

hard

Fix the error in the lifecycle hook method name to correctly detect changes.

Angular

export class MyComponent implements DoCheck {
  [1]() {
    console.log('Change detected');
  }
}

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

AngOnChanges

BngDoCheck

CngAfterContentChecked

DngAfterViewChecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngOnChanges which is for input property changes.

Using methods for after content or view checks.

The DoCheck interface requires the method ngDoCheck to detect changes manually.

4fill in blank

hard

Fill both blanks to create a component that logs messages on initialization and destruction.

Angular

export class LoggerComponent implements OnInit, [1] {
  ngOnInit() {
    console.log('Logger started');
  }
  [2]() {
    console.log('Logger stopped');
  }
}

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

AOnDestroy

BOnChanges

CngOnDestroy

DngOnChanges

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing interface names with method names.

Using OnChanges which is for input changes.

The component implements OnDestroy and defines ngOnDestroy to run code when the component is removed.

5fill in blank

hard

Fill all three blanks to create a component that logs messages on initialization, after view init, and destruction.

Angular

export class FullLoggerComponent implements OnInit, AfterViewInit, OnDestroy {
  [1]() {
    console.log('Component initialized');
  }
  [2]() {
    console.log('View initialized');
  }
  [3]() {
    console.log('Component destroyed');
  }
}

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

AngOnInit

BngAfterViewInit

CngOnDestroy

DngDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngDoCheck which is for manual change detection.

Mixing method names with wrong lifecycle hooks.

The methods ngOnInit, ngAfterViewInit, and ngOnDestroy correspond to the lifecycle hooks for initialization, view ready, and cleanup.