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.

Practice

1. Why are lifecycle hooks important in Angular components?

easy

A. They make components load faster by default.

B. They automatically style your components.

C. They replace the need for services.

D. They let you run code at specific times during a component's life.

Solution

1. Step 1: Understand what lifecycle hooks do

   Lifecycle hooks allow you to run code at key moments like creation, update, or destruction of a component.

2. Step 2: Identify the main benefit

   This helps manage resources and keep the app efficient by running code only when needed.

3. Final Answer:

   They let you run code at specific times during a component's life. -> Option D

4. Quick Check:

   Lifecycle hooks = run code at key moments [OK]

Hint: Lifecycle hooks run code at key moments [OK]

Common Mistakes:

• Thinking lifecycle hooks style components
• Believing hooks replace services
• Assuming hooks speed up loading automatically

2. Which of the following is the correct syntax to implement the ngOnInit lifecycle hook in an Angular component?

easy

A. ngOnInit() { console.log('Init'); }

B. onInit() { console.log('Init'); }

C. nginit() { console.log('Init'); }

D. init() { console.log('Init'); }

Solution

1. Step 1: Recall the exact lifecycle hook name

   The correct lifecycle hook method name is ngOnInit with exact casing.

2. Step 2: Match the syntax

   The method should be declared as ngOnInit() { ... } inside the component class.

3. Final Answer:

   ngOnInit() { console.log('Init'); } -> Option A

4. Quick Check:

   Correct hook name and syntax = ngOnInit() { console.log('Init'); } [OK]

Hint: Lifecycle hooks start with 'ng' and use camelCase [OK]

Common Mistakes:

• Using wrong method names like onInit or init
• Incorrect casing like nginit
• Missing 'ng' prefix in method name

3. Given this Angular component code snippet, what will be logged to the console when the component is created?

export class MyComponent implements OnInit {
  constructor() { console.log('Constructor called'); }
  ngOnInit() { console.log('ngOnInit called'); }
}

medium

A. Constructor called\nngOnInit called

B. ngOnInit called\nConstructor called

C. Only Constructor called

D. Only ngOnInit called

Solution

1. Step 1: Understand Angular component creation order

   The constructor runs first when the component is created, then ngOnInit runs after Angular sets input properties.

2. Step 2: Trace the console logs

   First, 'Constructor called' logs, then 'ngOnInit called' logs.

3. Final Answer:

   Constructor called\nngOnInit called -> Option A

4. Quick Check:

   Constructor runs before ngOnInit [OK]

Hint: Constructor runs before ngOnInit [OK]

Common Mistakes:

• Thinking ngOnInit runs before constructor
• Expecting only one log message
• Confusing lifecycle order

4. What is wrong with this Angular component code snippet?

export class SampleComponent implements OnInit {
  ngOnInit() {
    this.loadData();
  }
  loadData() {
    console.log('Data loaded');
  }
  ngOnDestroy() {
    this.loadData();
  }
}

medium

A. ngOnInit should not be implemented without a constructor.

B. ngOnDestroy must return a value.

C. Calling loadData() inside ngOnDestroy is incorrect because it runs when component is destroyed.

D. loadData() cannot be called inside lifecycle hooks.

Solution

1. Step 1: Understand purpose of ngOnDestroy

   ngOnDestroy runs when the component is about to be removed. It is used to clean up resources, not to load data.

2. Step 2: Identify misuse of loadData()

   Calling loadData() during destruction is illogical because loading data is for initialization, not cleanup.

3. Final Answer:

   Calling loadData() inside ngOnDestroy is incorrect because it runs when component is destroyed. -> Option C

4. Quick Check:

   ngOnDestroy is for cleanup, not loading data [OK]

Hint: Use ngOnDestroy only for cleanup tasks [OK]

Common Mistakes:

• Thinking ngOnDestroy needs a return value
• Believing lifecycle hooks can't call methods
• Assuming constructor is required with ngOnInit

5. You want to fetch user data only once when a component loads and clean up a subscription when the component is destroyed. Which lifecycle hooks should you use together?

hard

A. ngOnChanges to fetch data, ngDoCheck to clean up subscription

B. ngOnInit to fetch data, ngOnDestroy to clean up subscription

C. constructor to fetch data, ngAfterViewInit to clean up subscription

D. ngAfterContentInit to fetch data, ngAfterContentChecked to clean up subscription

Solution

1. Step 1: Identify hook for initial data fetch

   Use ngOnInit to run code once after component creation, perfect for fetching data.

2. Step 2: Identify hook for cleanup

   Use ngOnDestroy to clean up resources like subscriptions before component is removed.

3. Final Answer:

   ngOnInit to fetch data, ngOnDestroy to clean up subscription -> Option B

4. Quick Check:

   Init = fetch, Destroy = cleanup [OK]

Hint: Fetch in ngOnInit, clean in ngOnDestroy [OK]

Common Mistakes:

• Using constructor for async data fetch
• Confusing ngAfterViewInit with cleanup
• Using ngOnChanges for one-time fetch