Purpose of the ngOnInit() method in Angular
Last Updated :
22 Mar, 2024
ngOnInit is a lifecycle hook in Angular that is called after the constructor is called and after the component’s inputs have been initialized. It is used to perform any additional initialization that is required for the component. ngOnInit is commonly used to call services or to set up subscriptions.
Syntax:
ngOnInit(){
//Logic
}
Purpose of ngOnInit() :
1. Initialization of Component
The primary purpose of ngOnInit()
is to initialize the component after Angular has set the input properties. It provides a safe and reliable place to perform any initialization logic that depends on these properties being available.
2. Access to Input Properties
During the execution of ngOnInit()
, you have access to all the input properties that have been bound to the component. This allows them to perform any setup or initialization based on the values of these properties.
3. Calling Services
ngOnInit()
is often used to call services to fetch initial data needed by the component. Since it's called after Angular has set the input properties but before the view is rendered, it's an appropriate place to make such HTTP requests or initialize other services.
4. Setup of Observables
If working with observables or other asynchronous data sources, ngOnInit()
provides a suitable place to subscribe to these data sources. This ensures that the subscriptions are set up before the component starts rendering, avoiding any race conditions or data inconsistencies.
5. DOM Manipulation
While Angular discourages direct DOM manipulation, there might be scenarios where you need to perform some DOM manipulation based on the component's input properties. ngOnInit()
provides a safe place to perform such operations, ensuring that the DOM is properly initialized before it's rendered.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure:

Dependencies:
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.0",
"@angular/cli": "^17.3.0",
"@angular/compiler-cli": "^17.3.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
Example: In this example, we have imported OnInit (life cycle hook) that is invoked by the Angular to represent the Angular is done in creating the component.
JavaScript
//app.component.ts
import { Component, OnInit } from "@angular/core";
@Component({
selector: "my-app",
template:
"<div><h1>{{data}}</h1><h1>{{subtitle}}</h1></div>",
styles: [`div {
color: green;
}`],
})
export class AppComponent {
title: string;
subtitle: string;
data: string;
constructor() {
this.title = "Welcome to GeeksForGeeks";
}
ngOnInit() {
this.data = "Welcome to GeeksForGeeks";
this.subtitle = "from ngOnInit";
}
}
JavaScript
//app.module.ts
import { BrowserModule }
from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
To start the application run the following command.
ng serve
Output:

Similar Reads
Purpose of the FormsModule in Angular Forms are widely used in web applications that allow you to provide the data, submit the forms, and interact with the application. In Angular for handling the forms, we use Forms Module which imports several powerful tools for creating, managing, and validating forms. In this article, we'll cover th
5 min read
Purpose of ProvidedIn in Angular Angular's dependency injection system is a powerful mechanism that helps manage dependencies between components, services, and other parts of the application. One important aspect of this system is the providedIn property, which determines the scope and visibility of a service or module. In this art
4 min read
Purpose of NgModule Decorator in Angular The NgModule decorator in Angular is like a blueprint for organizing and configuring different parts of your application. It's like a set of instructions that tells Angular how to assemble the various components, directives, pipes, and services into cohesive units called modules. These modules help
5 min read
Explain the purpose of ActivatedRoute in Angular In Angular applications, navigation is a fundamental feature, that helps to move between different views and components easily. The ActivatedRoute service plays an important role in this navigation process, providing valuable information about the current route, including route parameters, query par
5 min read
Explain the Role of @Component Decorator in Angular Components are the fundamental building blocks that create the different parts of our Angular application that we see and interact with. They combine the appearance and functionality of a specific part of the application and can be used in different places..A decorator is a TypeScript feature that a
4 min read