Component lifecycle overview in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle hook interface for Angular components.

Angular

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

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

AOnDestroy

BOnInit

CAfterViewInit

DDoCheck

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 hook into the component initialization lifecycle event.

2fill in blank

medium

Complete the code to implement the OnInit lifecycle hook in the component class.

Angular

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

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

AOnInit

BAfterContentInit

COnDestroy

DDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnDestroy instead of OnInit.

Not implementing the interface but still defining ngOnInit.

Implementing OnInit allows the component to run ngOnInit() when it starts.

3fill in blank

hard

Fix the error in the lifecycle hook method name for the AfterContentInit hook.

Angular

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

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

AngOnInit

BngAfterContentChecked

CngAfterViewInit

DngAfterContentInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngAfterContentChecked instead of ngAfterContentInit.

Confusing with ngAfterViewInit.

The correct method name for the AfterContentInit hook is ngAfterContentInit().

4fill in blank

hard

Fill both blanks to create a component that logs messages when it initializes and when it is destroyed.

Angular

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

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

AOnInit

BAfterViewInit

COnDestroy

DDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using AfterViewInit instead of OnDestroy.

Forgetting to implement both interfaces.

Implementing OnInit and OnDestroy allows the component to run code when it starts and when it is removed.

5fill in blank

hard

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

Angular

export class FullLifecycleComponent implements [1], [2], [3] {
  ngOnInit() {
    console.log('Init');
  }
  ngAfterViewInit() {
    console.log('View initialized');
  }
  ngOnDestroy() {
    console.log('Destroyed');
  }
}

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

AOnInit

BAfterViewInit

COnDestroy

DAfterContentInit

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing AfterContentInit with AfterViewInit.

Forgetting to implement all three interfaces.

This component implements OnInit, AfterViewInit, and OnDestroy to handle key lifecycle events.