Lifecycle execution order mental model in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Angular lifecycle: Initial rendering order

Given an Angular standalone component using signals, which lifecycle hook runs first during initial rendering?

Angular

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

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

  constructor() {
    console.log('constructor');
  }

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

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }
}

A constructor

B ngOnInit

C ngAfterViewInit

D ngDoCheck

💡 Hint

Think about what runs first when Angular creates a component instance.

The constructor runs first when Angular creates the component instance. Lifecycle hooks like ngOnInit run after the constructor during initialization.

❓ state_output

intermediate

Signal effect execution timing in Angular

What will be the console output order when this Angular component with a signal and effect runs?

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button>`
})
export class CounterComponent {
  count = signal(0);

  constructor() {
    effect(() => {
      console.log('Effect:', this.count());
    });
  }

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

A Effect: 1 (on init), then Effect: 0 (after click)

B Effect: 0 (on init), then Effect: 1 (after click)

C No output on init, then Effect: 1 (after click)

D Effect: 0 only once, no output after click

💡 Hint

Effects run immediately once and then on signal changes.

The effect runs once immediately logging the initial value 0. After clicking the button, the signal updates to 1, triggering the effect again.

❓ lifecycle

advanced

Order of Angular lifecycle hooks with signals and @if control flow

In Angular 17+ with standalone components and signals, what is the correct order of lifecycle hooks when a component with an @if block is first rendered?

Angular

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

@Component({
  selector: 'app-toggle',
  standalone: true,
  template: `
    <button (click)="toggle()">Toggle</button>
    @if (visible()) {
      <section>Visible Content</section>
    }
  `
})
export class ToggleComponent {
  visible = signal(false);

  constructor() {
    console.log('constructor');
  }

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

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }

  toggle() {
    this.visible.update(v => !v);
  }
}

A ngAfterViewInit, constructor, ngOnInit

B ngOnInit, constructor, ngAfterViewInit

C constructor, ngOnInit, ngAfterViewInit

D constructor, ngAfterViewInit, ngOnInit

💡 Hint

Remember the constructor runs before lifecycle hooks.

The constructor runs first to create the component instance. Then ngOnInit runs after inputs are set. Finally, ngAfterViewInit runs after the view is fully initialized, including the @if block.

📝 Syntax

advanced

Identify the syntax error in Angular signal usage

Which option contains a syntax error in defining and using a signal in Angular 17+?

A

const count = signal(0);
count.update(c => c + 1);

B

const count = signal(0)
count.update(c => c + 1);

C

;)1 + c >= c(etadpu.tnuoc
;)0(langis = tnuoc tsnoc

D

const count = signal(0);
count.set(count() + 1);

💡 Hint

Check how to update a signal's value correctly.

Option D tries to use count.set(count + 1), but count is a signal function, not a number. You must use count.update(c => c + 1) or count.set(newValue) with a number.

🔧 Debug

expert

Why does this Angular component's ngAfterViewInit not run?

An Angular standalone component uses signals and the new @if control flow. The ngAfterViewInit hook never logs. Why?

Angular

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

@Component({
  selector: 'app-hidden',
  standalone: true,
  template: `
    @if (visible()) {
      <section>Content</section>
    }
  `
})
export class HiddenComponent implements AfterViewInit {
  visible = signal(false);

  constructor() {
    console.log('constructor');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }
}

A The component must implement AfterViewInit interface to run ngAfterViewInit

B ngAfterViewInit is deprecated in Angular 17+ and replaced by signals

C ngAfterViewInit only runs if the view has content; here visible() is false so it never runs

D The constructor blocks ngAfterViewInit from running

💡 Hint

Check if Angular recognizes the lifecycle hook method.

Angular only calls lifecycle hooks if the component class implements the corresponding interface. Without implements AfterViewInit, ngAfterViewInit is not called.