Sign in
Skip to solution
easyFrontend

What is the difference between the constructor and ngOnInit?

895 views
01

Understand the problem

When to use each.

lifecycle
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

The constructor runs when the class is instantiated — use it only for DI. ngOnInit runs after Angular has set the component's @Input properties, so it's the correct place for initialization logic that depends on inputs or for starting data fetches.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Inputs are ready in ngOnInit, not the constructor
import { Component, Input, OnInit, inject } from '@angular/core';

@Component({ selector: 'app-user', standalone: true, template: '{{ label }}' })
export class UserComponent implements OnInit {
  @Input() userId!: number;
  label = '';

  constructor() {
    // ⚠️ this.userId is undefined here — inputs not set yet
  }

  ngOnInit() {
    // ✅ userId is available now
    this.label = 'Loading user #' + this.userId;
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 2 of 121 decoded in the Angular track. One more won't hurt.

Back to track