interview

home / developersection / interviews / what is oninit in angular?

Ask Question
Anubhav Kumar

Student

The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

Message
Can you answer this question?
Answer

1 Answers

Anubhav Kumar

Anubhav Kumar

16-Dec-2025

In Angular, OnInit is a lifecycle hook that lets a component (or directive) run code once, right after Angular has initialized its input properties.

What exactly is OnInit?

  • OnInit is an interface provided by Angular.
  • It defines a single method: ngOnInit()
  • Angular automatically calls ngOnInit() after the component’s constructor runs and after all @Input() values are set.

Why do we use OnInit?

You use OnInit when you want to:

  • Fetch data from an API
  • Initialize component variables
  • Set up subscriptions
  • Perform logic that depends on @Input() values
  • Run setup code once when the component loads

Basic example

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {

  name: string = '';

  constructor() {
    console.log('Constructor called');
  }

  ngOnInit(): void {
    console.log('OnInit called');
    this.name = 'Angular User';
  }
}

Execution order

  • Constructor
  • ngOnInit()

Constructor vs ngOnInit()

Constructor ngOnInit()
Used to inject dependencies Used to initialize logic
Runs when class is created Runs after inputs are set
Should be lightweight Can contain business logic

Best practice:

  • Use the constructor only for dependency injection
  • Use ngOnInit() for initialization logic

Example with @Input()

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

@Component({
  selector: 'app-profile',
  template: `<p>{{ userId }}</p>`
})
export class ProfileComponent implements OnInit {

  @Input() userId!: number;

  ngOnInit(): void {
    // userId is available here
    console.log(this.userId);
  }
}

When NOT to use OnInit

  • For logic that should run every time a value changes → use ngOnChanges
  • For cleanup → use ngOnDestroy
  • For DOM access → use ngAfterViewInit

Summary

  • OnInit is an Angular lifecycle hook
  • Implemented via ngOnInit()
  • Runs once after component initialization
  • Ideal for API calls and setup logic
  • Better than using the constructor for initialization

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy