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.