What could be causing ngOnInit to be called repeatedly in every instance?

Question

What could be causing ngOnInit to be called repeatedly in every instance?

According to the Angular documentation (https://angular.io/api/core/OnInit), ngOnInit is called immediately after the directive's data-bound properties are checked for the first time, but before any of its children are checked. It is a one-time invocation when the directive is created.

Although ngOnInit should be called only once, in the example provided by the plunker (taken from https://angular.io/tutorial/toh-pt5), I made modifications to both app/heroes/heroes.component.ts and app/dashboard/dashboard.component.ts to include console.log statements.

Upon opening the Developer Tools (F12), the console displayed repeated logs when the route was changed.

I researched various sources such as why ngOnInit is called twice?, the difference between Constructor and ngOnInit, Angular 2 App Component ngOnInit being called twice when using iframe, and ngOnInit being called every time the route is changed.

However, I could not comprehend why ngOnInit was triggering on each route change.


console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");

angular typescript angular2-routing

Answer 1

Answer №1

Whenever the route is altered, the component gets destroyed, and then when the route switches back, the component is reinitialized.

Try adding this code snippet to the DashboardComponent and witness it yourself:

    ngOnDestroy() {
      console.log("ngOnDestroy InDashBoard");
    }

Answer 2

Whenever the route is altered, the component gets destroyed, and then when the route switches back, the component is reinitialized.

Try adding this code snippet to the DashboardComponent and witness it yourself:

    ngOnDestroy() {
      console.log("ngOnDestroy InDashBoard");
    }

Answer 3

Answer №2

I encountered an issue with how I was initializing the Child Components in my particular scenario. Within the metadata object of my @NgModule decorator, I mistakenly included the child component in the bootstrap property alongside the parent component. This incorrect setup caused my child components' properties to be reset and resulted in the OnInit() lifecycle method being triggered twice.

@NgModule({
 imports: [ BrowserModule, FormsModule ], // using 'FormsModule' for two-way data binding
 declarations: [ parentComponent, Child1, Child2], // all components
 //bootstrap: [parentComponent,Child1,Child2] // this caused issues with binding inputs in Child components
  bootstrap: [parentComponent] // only include parent components here
 })

Answer 4

I encountered an issue with how I was initializing the Child Components in my particular scenario. Within the metadata object of my @NgModule decorator, I mistakenly included the child component in the bootstrap property alongside the parent component. This incorrect setup caused my child components' properties to be reset and resulted in the OnInit() lifecycle method being triggered twice.

@NgModule({
 imports: [ BrowserModule, FormsModule ], // using 'FormsModule' for two-way data binding
 declarations: [ parentComponent, Child1, Child2], // all components
 //bootstrap: [parentComponent,Child1,Child2] // this caused issues with binding inputs in Child components
  bootstrap: [parentComponent] // only include parent components here
 })

Answer 5

Answer №3

It's possible that you're looking for OnInit to trigger twice. The key is being able to differentiate between the initial creation of the component and subsequent creations. If you want something to happen only on the first instantiation, then it should be included in the constructor. The constructor will only be called during the initial instantiation if the component is not Lazy loaded. On the other hand, if you need something to happen each time the route returns to the component, then it belongs in the OnInit method.

Answer 6

It's possible that you're looking for OnInit to trigger twice. The key is being able to differentiate between the initial creation of the component and subsequent creations. If you want something to happen only on the first instantiation, then it should be included in the constructor. The constructor will only be called during the initial instantiation if the component is not Lazy loaded. On the other hand, if you need something to happen each time the route returns to the component, then it belongs in the OnInit method.

What could be causing ngOnInit to be called repeatedly in every instance?

Answer №1

Answer №2

Answer №3

Similar questions

Angular - Error: Object returned from response does not match the expected type of 'request?: HttpRequest<any>'

Issue with Angular ngFor: displaying only one name instead of all names in the loop

Connection to mongo is currently unavailable for Middleware next

Determine if an object contains a specific key in Typescript and access the value associated with that

"Tips on updating the value of a BehaviorSubject with map, filter, find, or findIndex in an Angular

In Angular, you can achieve two-way binding between a mat tab group and an array in your typescript file. But what's the best way to programmatically switch to a specific mat-tab using types

Connecting data from a .ts file in one webpage to the HTML content of another webpage

I am encountering compilation errors while trying to run a basic react-dnd list using typescript

Is there a way for me to access and install the Angular 2 release candidate through either npm or

Is it recommended to ensure all of my components are nested within the root App component?

When using react-chartjs-2 with NextJS and typescript to create a bar chart, an error occurred: TypeError - Attempting to access properties of an undefined object (specifically 'map

Protractor typescript guide: Clicking an element with _ngcontent and a span containing buttontext

Looking for a way to display specific JSON data on the home.html page with just a click?

The dreaded error message [ERR_REQUIRE_ESM] has appeared, indicating that the require() function for an ES

What is the connection between tsconfig.json and typings.json files?

Error message "After the upgrade to Angular 15, the property 'selectedIndex' is not recognized in the type 'AppComponent'."

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

TS Intellisense in Visual Studio Code for JavaScript Events and File Types

Creating objects in Angular 2 through HTTP GET calls