ngOnInit for initialization in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when ngOnInit runs in this Angular component?

Consider this Angular component code snippet. What will be the value of message after ngOnInit runs?

Angular

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

@Component({
  selector: 'app-welcome',
  template: `<p>{{ message }}</p>`,
  standalone: true
})
export class WelcomeComponent implements OnInit {
  message = '';

  ngOnInit() {
    this.message = 'Hello from ngOnInit!';
  }
}

A "" (empty string)

B null

C undefined

D "Hello from ngOnInit!"

💡 Hint

ngOnInit runs after the component is created but before it is displayed.

The ngOnInit method sets the message property to "Hello from ngOnInit!" before the template renders. So the displayed message will be this string.

❓ lifecycle

intermediate

When is ngOnInit called in Angular component lifecycle?

Choose the correct timing for when ngOnInit is called in an Angular component's lifecycle.

A After the component's constructor and before the first render

B Before the component's constructor runs

C After the component is destroyed

D Only when the component's inputs change

💡 Hint

Think about when initialization logic should run relative to component creation.

ngOnInit runs once after the constructor and before the component is displayed. It is the right place for initialization logic.

📝 Syntax

advanced

Identify the correct ngOnInit implementation in this Angular component

Which option correctly implements ngOnInit in this Angular component?

Angular

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

@Component({
  selector: 'app-counter',
  template: `<p>{{ count }}</p>`,
  standalone: true
})
export class CounterComponent implements OnInit {
  count = 0;

  // ngOnInit implementation goes here
}

A ngOnInit() => { this.count = 10; }

B ngOnInit() { this.count = 10; }

C function ngOnInit() { this.count = 10; }

D ngOnInit { this.count = 10; }

💡 Hint

Remember the correct method syntax inside a class in TypeScript.

Option B uses the correct method syntax for ngOnInit. Options A, B, and D have syntax errors or invalid method declarations.

🔧 Debug

advanced

Why does this ngOnInit code not update the template?

Given this Angular component, why does the template not show the updated title after ngOnInit?

Angular

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

@Component({
  selector: 'app-title',
  template: `<h1>{{ title }}</h1>`,
  standalone: true
})
export class TitleComponent implements OnInit {
  title = 'Initial';

  ngOnInit() {
    let title = 'Updated in ngOnInit';
  }
}

A The component selector is missing, so it does not render

B ngOnInit is not called automatically, so the title stays the same

C The local variable 'title' inside ngOnInit shadows the class property, so the class property is not changed

D The template binding syntax is incorrect and does not update

💡 Hint

Check variable scope inside ngOnInit.

The let title inside ngOnInit creates a new local variable that hides the class property. The class property title remains unchanged, so the template shows the initial value.

🧠 Conceptual

expert

What is the main benefit of using ngOnInit instead of constructor for initialization?

Why should you put initialization code in ngOnInit rather than the constructor in Angular components?

A ngOnInit runs after Angular sets input properties, so initialization can use them safely

B The constructor runs multiple times, but ngOnInit runs only once

C ngOnInit runs before the constructor, so it initializes earlier

D The constructor cannot access class properties, but ngOnInit can

💡 Hint

Think about when Angular sets input properties relative to constructor and ngOnInit.

The constructor runs before Angular sets input properties, so they may be undefined there. ngOnInit runs after inputs are set, so it is safe to use them for initialization.