Angular Loading Spinner Issue: ExpressionChangedAfterItHasBeenCheckedError encounted

In my Angular application, I implemented a loading-spinner component that I placed in the app component next to the router-outlet using *ngIf="isLoading". This allows me to have the loading spinner visible from every part of the application.
The 'isLoading' boolean is updated globally through ngrx's Store.
However, I encountered an error:

Error: ExpressionChangedAfterItHasBeenCheckedError: The expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'

After researching this error, I found out that one should not change parameter values from deeper child components.
So, how can I create a loading-spinner without duplicating the code in my app and without causing a change detection error?

angulartypescriptangular2-changedetection

Answer №2

One potential solution is to utilize the ngAfterContentInit lifecycle hook, combined with a setTimeout function set to 0.

Here is an example implementation:

ngAfterContentInit() {
  setTimeout(() => console.log('Insert your desired code here'), 0);
}

Remember to include 'implements AfterContentInit' in your export class and import from '@angular/core'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The tooltip display in ng2-google-charts is not functioning properly

In my project, I am utilizing the ng2-google-charts library to generate a Timeline chart with a customized tooltip. The requirement is fairly simple - I need to display a specific value based on certain conditions. Below is the relevant code snippet: Comp ...

angularchartsgoogle-visualization

Activate angular2-notifications using an interceptor

I implemented an interceptor code in my Angular project that displays an alert for API responses, but I would like to replace it with angular2-notifications. Here is a snippet from app.component.html: <router-outlet><app-spinner></app-spin ...

angular

Monitor checkbox status to trigger confirmation dialog

My goal is to prevent the checkbox from changing if 'NO' is clicked in a dialog. The dialog pops up, but I can't figure out how to wait for it to close before allowing the checkbox change. I've attempted using Promises and doing everyt ...

javascriptangularangular6

The table dynamically adjusts based on the JSON data

My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...

htmljsonangular

Develop a TypeScript class in a distinct file

I currently have ag-grid implemented in an Angular project with a CustomFilter. The problem is that the file containing the code for the CustomFilter function is becoming quite large and difficult to manage. I am now looking to move the CustomFilter to a s ...

javascriptangulartypescript

A Vue object with dynamic reactivity that holds an array of objects

I've experimented with various approaches, but so far I've only managed to get this code working: // This works <script setup lang="ts"> import { reactive } from 'vue' import { IPixabayItem } from '../interfaces/IPi ...

typescriptvue.jsvuejs3vue-composition-api

ERROR TypeError: Unable to access the 'nativeElement' property since it is undefined in Angular 5

I have encountered a problem while working on my application. Although similar issues have been asked before, I believe mine is slightly different. In my application, when a user deletes products from their cart, I want to automatically close the modal wi ...

angulartypescript

Sort your list efficiently with a custom hook in React using Typescript

I've been working on developing a custom hook in React that sorts an array based on two arguments: the list itself and a string representing the key to sort by. Despite trying various approaches, I haven't been able to find a solution yet. I&apos ...

javascriptreactjstypescript

Angular: Implementing a two-column layout based on specified count

I need to adjust the code below to display the first 8 results in column one and the remainder in column two instead of dividing them into even and odd columns. What changes should I make to achieve this? <div *ngFor="let year of userYear; let i = in ...

angularangular-ng-if

Node installation failed due to npm encountering an ETIMEDOUT error

Recently, I've been encountering some obstacles while attempting to install npm on our office's laptop within a specific directory. An error message keeps popping up: npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT np ...

node.jsangularangularjsnpmserver

Discovering ways to retrieve the complete HTTP response in Angular to access certain response headers

In my angular app, I need to check for specific response headers to handle JWT validation. If a user tries to access a route that requires a valid JWT with an expired token, the back-end ASP.NET Core server will have a response header token-expired: true. ...

angularobservable

How to submit a form nested within another form using React

I am working on a component called AddExpense.tsx which includes a form. The form should have the ability to add another category, which is a separate form stored in the AddCategory.tsx component. I am facing an issue where nesting these forms seems to br ...

reactjstypescriptforms

retrieve the name or path of the route currently being accessed

Here is the navigation bar code snippet: <nav class="menu"> <a routerLink="textArea" class="menu-item">text-area</a> <a routerLink="dropdown" class="menu-item">dropdown</a& ...

angulartypescriptroutesnavbar

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

This piece of code showcases the issue: let someVar: number; const someFunc = async () => { someVar = 1; } await someFunc(); if (someVar == 1) { console.log('It is 1'); } As a result, you will encounter ...

javascripttypescript

CircleCi intermittently loses connection to the browser during the execution of Karma tests

I am currently in the process of migrating a large program from AngularJS to Angular 7 (soon to be 8). With over 9000 spec's, approximately 1/4 are already running on Angular 7. However, we have been encountering an issue where CircleCI intermittently ...

angularautomated-testscircleci

What is the best way to determine which function to invoke in ngIf?

Depending on the value of a variable, I need to call either the login() or logout() methods from this.loggedInService.isLoggedIn. If the value of the variable is !this.loggedInService.isLoggedIn, then call login(). If !this.loggedInService.isLoggedIn is ...

javascripthtmlangulartypescript

Utilizing a basic promise in Node.js to handle database queries efficiently

As someone who typically develops in Java, I am new to Node.js and trying to create a REST service that pulls data from Firebase and returns it as a JSON object. I've been grappling with the concept of "promises" and although I grasp the idea behind ...

node.jstypescriptrestexpresspromise

Guide to Implementing Kendo-Grid in Angular 4 CLI

Having trouble using the Kendo-Grid in Angular4? You may encounter this error message: Uncaught Error: Template parse errors: 'Kunden-grid' is not a known element: 1. If 'Kunden-grid' is an Angular component, then verify that it is par ...

angulartelerikkendo-grid

The PassportJS logged in feature always yields a result of zero

After successfully implementing passportJS in my application, I encountered an issue with the current connected user. When using (req.isAuthenticated()), it always returns "0". Here is the code snippet from auth.js: /* Passport - Sessions - Cookies D ...

node.jsangularexpresspassport.jspassport-local

What is the reason behind the Partial input basic type returning itself?

Snippet of code excerpt: type PartialType<T> = { [P in keyof T]?: T[P]; } I am curious about why the PartialType input basic type (such as string returning string) returns itself instead of throwing an error or an object. // undef => undefined t ...

typescript