easyFrontend

What is the difference between the constructor and ngOnInit?

Q: What is the difference between the constructor and ngOnInit?

**Core concept.** The **constructor** runs when the class is instantiated — its job is **Dependency Injection** (receive services), not real work. ngOnInit is an Angular **lifecycle hook** that runs **after** Angular has set the component's @Input bindings, so it's where initialization that depends on inputs belongs. constructor inject deps <rect class='d-box' x='170' y='50' width='120' he

895 views

Understand the problem

When to use each.

lifecycle

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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;
  }
}

Join the discussion

Discussion (0)

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

Explain the new Control Flow (@if, @for, @switch) and how it compares to structural directives.

Explain the difference between FormGroup.patchValue() and FormGroup.setValue().