Error: Template Update Required Due to Observable Value Change - Fixing the ExpressionChangedAfterItHasBeenCheckedError

Question

Error: Template Update Required Due to Observable Value Change - Fixing the ExpressionChangedAfterItHasBeenCheckedError

After searching through numerous SO posts in search of a solution, I finally stumbled upon one that involved a hacky implementation. The issue at hand involves an observable extracted from the ngrx store which I then subscribe to:

this.navigationSelected$ = this.store.pipe(select(currentlySelectedNavigation));

this.navigationSelected$.subscribe(res => {
  ...
});

This subscription is used within the template with an ngIf statement that depends on the value of this observable:

<profile-navigation *ngIf="(navigationSelected$ | async) == navigationLayout[0].location"></profile-navigation>

However, each time the navigationSelected$ value changes, it triggers the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: false'.

Even though calling cdRef.detectChanges() at the end of the subscription resolves the issue, the error persists and the solution feels like a workaround. Is there a better approach to achieve the desired outcome?

angular typescript rxjs angular-changedetection

Answer 1

Answer №1

To solve this problem, I typically include a debounceTime(0).

I like to use this line of code: this.selectedLink$ = this.dataStore.pipe(select(currentNavItem), debounceTime());

Answer 2

To solve this problem, I typically include a debounceTime(0).

I like to use this line of code: this.selectedLink$ = this.dataStore.pipe(select(currentNavItem), debounceTime());

Answer 3

Answer №2

Each time the navigationSelected$ value changes, an error is triggered:

This error indicates that the value has changed twice.

Finding and fixing these errors on a selector can be challenging. It's not necessarily a problem with the view itself but rather with the store changing state before and after rendering the view. This often suggests that a dispatch should occur after a setTimeout() call.

The issue arises when another part of your code must change the state to prevent the view from causing errors. This dependency is less than ideal.

An alternative approach is to emit the value using EventEmitter.

<profile-navigation *ngIf="(navigationSelectedSafe$ | async) == navigationLayout[0].location"></profile-navigation>

public navigationSelectedSafe$ = new EventEmitter<any>(true); // must be true

this.navigationSelected$.subscribe(res => navigationSelectedSafe$.emit(res));

By using EventEmitter(true), values are emitted after a setTimeout(), preventing change errors in the view.

You can also explore your source code for instances where you use @Output() and try changing it to EventEmitter(true) to resolve the issue.

Typically, encountering this error on a selector indicates extensive state-related work outside of views. A component that needs to notify a change should utilize @Output(), but if it dispatches instead, it bypasses the view process, leading to such issues.

Answer 4

Each time the navigationSelected$ value changes, an error is triggered:

This error indicates that the value has changed twice.

Finding and fixing these errors on a selector can be challenging. It's not necessarily a problem with the view itself but rather with the store changing state before and after rendering the view. This often suggests that a dispatch should occur after a setTimeout() call.

The issue arises when another part of your code must change the state to prevent the view from causing errors. This dependency is less than ideal.

An alternative approach is to emit the value using EventEmitter.

<profile-navigation *ngIf="(navigationSelectedSafe$ | async) == navigationLayout[0].location"></profile-navigation>

public navigationSelectedSafe$ = new EventEmitter<any>(true); // must be true

this.navigationSelected$.subscribe(res => navigationSelectedSafe$.emit(res));

By using EventEmitter(true), values are emitted after a setTimeout(), preventing change errors in the view.

You can also explore your source code for instances where you use @Output() and try changing it to EventEmitter(true) to resolve the issue.

Typically, encountering this error on a selector indicates extensive state-related work outside of views. A component that needs to notify a change should utilize @Output(), but if it dispatches instead, it bypasses the view process, leading to such issues.

Error: Template Update Required Due to Observable Value Change - Fixing the ExpressionChangedAfterItHasBeenCheckedError

Answer №1

Answer №2

Similar questions

Maximizing Performance of JSON.stringify in Angular

What is the location of the file storage while executing ng serve?

Tips for disabling the download prompt in Chrome with the help of Protractor

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

Is the client component not initializing the fetch operation?

Problem with Ionic2 star rating component

The function type '() => JSX.Element' cannot be assigned to the type 'ReactNode'

Navbar Username in Next.js with Typescript and Supabase Integration

Creating an XML file with Angular 2: Step-by-step guide

Tips on selecting specific text from a drop-down menu

Guide to utilizing services in Angular 2

crafting connections in 3D using TypeORM (ORM)

Dealing with null exceptions in Angular 4: Best practices

Dealing with observable errors in Angular 2 beta.12 and RxJS 5 beta.3

Swapping the content of the API response with Angular 11 in the HTML

Guide to adding a CSS class to an Ionic2 toast

In Typescript, try/catch blocks do not capture return values

Unusual behavior exhibited by ng-if within a widget

Using the OR operator in Angular's *ngIf directive within a component's HTML

Optimizing media queries with Angular: A comprehensive guide