What is ngOnInit's purpose and why prefer it over the constructor?

What's really being asked

This question probes your understanding of Angular component lifecycle timing and the boundary between JavaScript class mechanics and Angular framework behavior. Interviewers want to see that you know when input properties become available and why initialization logic belongs in a lifecycle hook rather than a class constructor.

The full answer

First, define the constructor as the standard JavaScript class constructor that runs when Angular instantiates the component class. Second, define ngOnInit as the lifecycle hook that runs exactly once after Angular has initialized all of the component inputs with their initial values. Third, explain the practical implication: inside the constructor, input properties are not yet bound, so accessing them yields undefined or default values, whereas inside ngOnInit they are guaranteed to have their first bound values. Fourth, mention that during initialization the first ngOnChanges runs before ngOnInit, which is relevant for input change inspection. Fifth, note that heavy setup logic such as service calls or state derivation should live in ngOnInit to keep the constructor lightweight and focused on dependency injection assignments.

The mistakes people make

Claiming that the constructor should never contain any logic at all; while lightweight is preferred, DI assignments happen there. Asserting that ngOnInit is a TypeScript requirement or compiler artifact rather than an Angular framework contract. Saying that inputs are available in the constructor because they look like class properties. Suggesting that ngOnInit runs multiple times during the component life. Stating that ngOnInit runs before ngOnChanges during initialization.

What usually comes next

How would you react to input changes after initialization? When would you use ngOnChanges instead of ngOnInit? What happens if you modify component state inside ngOnChanges during initialization? Can you perform DOM manipulation in ngOnInit? Why should constructors stay lean when using server-side rendering?

A concrete example

Imagine a UserProfile component with an input called userId. In the constructor, this userId is still unset because Angular has not yet bound the input from the parent template. If you call a userService fetchProfile method with this userId inside the constructor, you pass undefined. Moving the same call to ngOnInit guarantees that userId has the value passed from the parent, so the service request is valid. If you also need to detect subsequent changes to userId, you would implement ngOnChanges, but the initial safe read still belongs in ngOnInit.