Component lifecycle overview in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an Angular component is initialized?

Consider an Angular standalone component using signals and the new lifecycle hooks. What is the correct sequence of lifecycle events when the component first appears on screen?

A 1,3,4,2

B 1,2,3,4

C 1,3,2,4

D 2,1,3,4

💡 Hint

Remember that ngOnChanges runs after constructor if there are input changes.

The constructor runs first to create the component instance.

Then ngOnChanges runs if there are input property changes.

Next ngOnInit runs once after the first ngOnChanges.

Finally, ngAfterViewInit runs after the component's view is fully initialized.

❓ state_output

intermediate

What is the value of the signal after component initialization?

Given this Angular component snippet using signals, what is the value of the signal 'count' after the component initializes?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `Count: {{ count() }}`
})
export class CounterComponent {
  count = signal(0);

  constructor() {
    this.count.set(5);
  }

  ngOnInit() {
    this.count.update(c => c + 1);
  }
}

A 6

B 5

C 0

D 1

💡 Hint

Check the order of constructor and ngOnInit execution and how signals update.

The signal 'count' starts at 0.

In the constructor, it is set to 5.

In ngOnInit, it is updated by adding 1, so 5 + 1 = 6.

🔧 Debug

advanced

Why does this Angular component not update the view after input changes?

This Angular component uses signals but the view does not update when the input changes. What is the cause?

Angular

import { Component, Input, signal } from '@angular/core';

@Component({
  selector: 'app-display',
  standalone: true,
  template: `Value: {{ value() }}`
})
export class DisplayComponent {
  value = signal('');

  @Input() set data(val: string) {
    this.value.set(val);
  }
}

A The signal 'value' is not declared as readonly, causing update errors.

B The setter does not trigger change detection because signals are not reactive to inputs.

C The component is missing ngOnChanges lifecycle hook to update the signal.

D The signal 'value' is initialized after the setter runs, so it resets to empty string.

💡 Hint

Consider the order of property initialization and setter execution.

The setter runs before the 'value' signal is initialized, so calling set on undefined causes no update.

Afterward, 'value' is initialized to empty string, overwriting the setter's value.

📝 Syntax

advanced

Which option correctly uses the new Angular 17 standalone component lifecycle syntax?

Select the code snippet that correctly uses the new Angular 17 lifecycle syntax with signals and standalone components.

A

}
}  
;)1 + c >= c(etadpu.tnuoc.siht    
{ )(tinInOgn  

}  
;)1(tes.tnuoc.siht    
{ )(rotcurtsnoc  

;)0(langis = tnuoc  
{ tnenopmoCelpmaS ssalc tropxe
)}
`>p/<}} )(tnuoc {{>p<` :etalpmet  
,eurt :enoladnats  
,'elpmas-ppa' :rotceles  
{(tnenopmoC@

;'eroc/ralugna@' morf } tcejni ,langis ,tnenopmoC { tropmi

B

import { Component, signal, inject } from '@angular/core';

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `<p>{{ count() }}</p>`
})
export class SampleComponent {
  count = signal(0);

  ngOnInit() {
    this.count.set(1);
  }

  constructor() {
    this.count.update(c => c + 1);
  }
}

C

import { Component, signal, inject } from '@angular/core';

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `<p>{{ count() }}</p>`
})
export class SampleComponent {
  count = signal(0);

  constructor() {
    this.count.set(1);
  }

  ngOnInit() {
    this.count.update(c => c + 1);
  }
}

D

mport { Component, signal, inject } from '@angular/core';

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `<p>{{ count() }}</p>`
})
export class SampleComponent {
  count = signal(0);

  constructor() {
    this.count.set(1);
  }

  ngOnInit() {
    this.count.update(c => c + 1);
  }
}

💡 Hint

Check for missing semicolons and correct order of constructor and ngOnInit.

Option C has correct syntax with semicolons and proper lifecycle method order.

Option C misses a semicolon after set(1).

Option C swaps constructor and ngOnInit logic incorrectly.

Option C is similar to D but option C is the cleanest correct syntax.

🧠 Conceptual

expert

Which lifecycle hook is best for accessing child component references in Angular 17?

In Angular 17 standalone components, which lifecycle hook should you use to safely access child component references after the view is fully initialized?

A ngAfterViewInit

B constructor

C ngOnInit

D ngAfterContentInit

💡 Hint

Think about when the component's template and child views are ready.

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

This is the safe place to access child components or DOM elements.

ngOnInit runs earlier, before the view is fully ready.

constructor runs before anything is set up.

ngAfterContentInit relates to projected content, not child views.

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