What is the difference between ngOnInit and a constructor in Angular?
Understand ngOnInit vs the constructor in Angular — why inputs are undefined in the constructor, what each is for, and where to put initialisation logic.
Expected Interview Answer
The constructor is a TypeScript class feature used mainly for dependency injection, while ngOnInit is an Angular lifecycle hook that runs after the component's inputs are set and is the right place for initialisation logic.
When a component is instantiated the constructor runs first, but at that point Angular has not yet resolved data-bound @Input properties, so they are undefined. ngOnInit runs shortly after, once the first change detection has set the inputs, making it the correct place for setup that depends on inputs or that has side effects like data fetching. Keeping the constructor lean also makes components easier to test.
- Clear separation of injection from initialisation
- Access to resolved @Input values in ngOnInit
- Lean, testable constructors
- Predictable place for side-effect setup
- Aligns with Angular's lifecycle and change detection
AI Mentor Explanation
The constructor is like a player getting handed their kit and cap in the dressing room — they exist and are equipped, but the match hasn't started, so they don't yet know the pitch conditions. ngOnInit is walking out to the crease once the toss and pitch report are in, ready to actually play with real information.
Step-by-Step Explanation
Step 1
Constructor runs
TypeScript instantiates the class; Angular injects declared dependencies via the constructor parameters.
Step 2
Inputs not ready
At constructor time, data-bound @Input properties are still undefined.
Step 3
Angular sets inputs
Angular runs first change detection and assigns the bound @Input values.
Step 4
ngOnInit runs
Angular calls ngOnInit once, now that inputs are resolved — ideal for setup and data fetching.
Step 5
Choose the right place
Use the constructor only for injection; put input-dependent and side-effect logic in ngOnInit.
What Interviewer Expects
- Knows the constructor is a TypeScript feature, ngOnInit is an Angular hook
- Explains @Input values are undefined in the constructor
- Places initialisation and data fetching in ngOnInit
- Uses the constructor mainly for dependency injection
- Mentions constructor runs before ngOnInit
Common Mistakes
- Fetching data or using inputs in the constructor
- Thinking ngOnInit and the constructor are interchangeable
- Overloading the constructor with heavy logic that hurts testability
- Assuming @Input values are available in the constructor
- Believing ngOnInit runs before the constructor
Best Answer (HR Friendly)
“The constructor is a standard class setup step used mostly to receive the services a component needs, and it runs before the component's incoming data is ready. ngOnInit runs a moment later, once that data is available, so it's the safe place to load information and get the component started.”
Code Example
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({ selector: 'app-user', template: '{{ user?.name }}' })
export class UserComponent implements OnInit {
@Input() userId!: string;
user: any;
// constructor: dependency injection only
constructor(private data: DataService) {
console.log(this.userId); // undefined here
}
// ngOnInit: inputs are ready, safe to fetch
ngOnInit() {
this.user = this.data.getUser(this.userId);
}
}Follow-up Questions
- Why are @Input properties undefined inside the constructor?
- What should you keep the constructor limited to?
- Does the constructor run before or after ngOnInit?
- Can you fetch remote data in the constructor, and why avoid it?
- How does keeping the constructor lean help unit testing?
MCQ Practice
1. Which runs first when a component is created?
The constructor runs first at instantiation; ngOnInit runs later after inputs are set.
2. Where are data-bound @Input values guaranteed to be available?
@Input values are resolved by Angular before ngOnInit, so they are undefined in the constructor but ready in ngOnInit.
3. What is the constructor primarily used for in Angular components?
The constructor is mainly for dependency injection; side effects and initialisation belong in ngOnInit.
Flash Cards
What is the constructor for in Angular? — Dependency injection and basic field setup — it runs before inputs are ready.
What is ngOnInit for? — Initialisation logic and data fetching, after @Input values are set.
Are @Input values available in the constructor? — No — they are undefined until ngOnInit.
Which runs first? — The constructor, then ngOnInit.