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.

Practice

1. Which Angular lifecycle hook is called once after the component's data-bound properties have been initialized?

easy

A. ngOnInit()

B. ngOnDestroy()

C. ngAfterViewInit()

D. ngDoCheck()

Solution

1. Step 1: Understand lifecycle hook purpose

   ngOnInit() runs once after Angular sets component input properties.

2. Step 2: Compare other hooks

   ngOnDestroy() runs before component removal, ngAfterViewInit() after view initialization, ngDoCheck() on every change detection.

3. Final Answer:

   ngOnInit() -> Option A

4. Quick Check:

   Initialization hook = ngOnInit() [OK]

Hint: Initialization after inputs = ngOnInit() [OK]

Common Mistakes:

• Confusing ngOnInit with ngAfterViewInit
• Thinking ngOnDestroy runs on init
• Mixing ngDoCheck with ngOnInit

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

easy

A. class MyComponent implements OnDestroy { ngDestroy() { } }

B. class MyComponent implements OnDestroy { ngOnDestroy() { } }

C. class MyComponent { onDestroy() { } }

D. class MyComponent implements OnDestroy { destroy() { } }

Solution

1. Step 1: Recall correct method name

   The lifecycle hook method for destruction is ngOnDestroy().

2. Step 2: Check interface implementation

   Implementing OnDestroy requires defining ngOnDestroy() exactly.

3. Final Answer:

   class MyComponent implements OnDestroy { ngOnDestroy() { } } -> Option B

4. Quick Check:

   OnDestroy method = ngOnDestroy() [OK]

Hint: Method name must be ngOnDestroy() exactly [OK]

Common Mistakes:

• Using wrong method name like ngDestroy or destroy
• Not implementing the interface
• Omitting parentheses in method

3. Given this Angular component code snippet, what will be logged to the console when the component is initialized and then destroyed?

export class SampleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Init');
  }
  ngOnDestroy() {
    console.log('Destroy');
  }
}

medium

A. Only Destroy

B. Only Init

C. Init followed by Destroy

D. No output

Solution

1. Step 1: Understand ngOnInit behavior

   ngOnInit() runs once when component initializes, logging 'Init'.

2. Step 2: Understand ngOnDestroy behavior

   ngOnDestroy() runs once before component is removed, logging 'Destroy'.

3. Final Answer:

   Init followed by Destroy -> Option C

4. Quick Check:

   Init then Destroy logs = Init followed by Destroy [OK]

Hint: Init logs on start, Destroy logs on removal [OK]

Common Mistakes:

• Assuming ngOnDestroy runs on init
• Expecting logs in reverse order
• Thinking no logs appear

4. Identify the error in this Angular component lifecycle hook implementation:

export class TestComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
  }
  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

medium

A. Missing OnDestroy interface in implements clause

B. ngOnInit method name is incorrect

C. ngOnDestroy should not be used here

D. Console.log statements are invalid

Solution

1. Step 1: Check implemented interfaces

   The class implements OnInit but defines ngOnDestroy() without implementing OnDestroy.

2. Step 2: Understand interface contract

   To use ngOnDestroy(), the class should implement OnDestroy interface for clarity and correctness.

3. Final Answer:

   Missing OnDestroy interface in implements clause -> Option A

4. Quick Check:

   Implement interface for each lifecycle hook used [OK]

Hint: Implement interfaces for all lifecycle hooks used [OK]

Common Mistakes:

• Ignoring interface implementation for ngOnDestroy
• Thinking method names are wrong
• Believing console.log is invalid

5. You want to run code after Angular fully initializes the component's view and its child views. Which lifecycle hook should you use, and why? Choose the correct hook and reason.

hard

A. ngAfterContentInit() because it runs after projected content is initialized.

B. ngOnInit() because it runs after input properties are set.

C. ngDoCheck() because it runs on every change detection cycle.

D. ngAfterViewInit() because it runs after the component's view and child views are initialized.

Solution

1. Step 1: Identify hook for view initialization

   ngAfterViewInit() runs after Angular initializes the component's view and child views.

2. Step 2: Compare other hooks

   ngOnInit() runs earlier, ngAfterContentInit() runs after projected content, and ngDoCheck() runs repeatedly.

3. Final Answer:

   ngAfterViewInit() because it runs after the component's view and child views are initialized. -> Option D

4. Quick Check:

   View init completion = ngAfterViewInit() [OK]

Hint: Use ngAfterViewInit() for post-view initialization code [OK]

Common Mistakes:

• Confusing ngAfterContentInit with ngAfterViewInit
• Using ngOnInit for view-dependent code
• Expecting ngDoCheck to run once