Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

What is OnInit in Angular?

Anubhav Sharma 427 16 Dec 2025

Anubhav Sharma

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 .

1 Answers

Anubhav Sharma 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

interview

What is OnInit in Angular?

Can you answer this question?

1 Answers

What exactly is OnInit?

Why do we use OnInit?