1

I have a weird issue with angular 10. Often I get this error "ExpressionChangedAfterItHasBeenCheckedError". I've seen that many people has this issue and I've tried implementing the same things as they but still couldn't fix mine.

So at the moment this error happens on 2 components.

First error on DocumentTabsComponent:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.
    at viewDebugError (core.js:20397)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20385)

And second component DropdownFilterComponent:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'x-placement: bottom'. Current value: 'x-placement: bottom-left'.

Here are the files for the components https://stackblitz.com/edit/angular-ivy-k3udtg?file=src/app/document-tabs/document-tabs.component.ts

There will be some components that are not defined because I cannot share the code base.

I tried detecting changes afterViewChecked as suggested in How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime but it didn't work.

    /**
     * To avoid error "Expression has changed after it was checked"
     */
    ngAfterViewChecked(): void {
        console.log('view checked');
        this.cdRef.detectChanges();
    }

/* OR */

 ngAfterViewInit(): void {
        console.log('view init');
        this.cdRef.detectChanges();
    }

Also I've seen some solutions using the async pipe and I tried doing that too. Didn't work.

César Castro Aroche
  • 595
  • 1
  • 9
  • 20

1 Answers1

0

you can use this line in your child :

changeDetection: ChangeDetectionStrategy.OnPush

or:

if(!this.cdRef['destroyed']){ // or if (!(<ViewRef>this.cdRef).destroyed) {
     this.cdRef.detectChanges();
 }
Souhail HARRATI
  • 303
  • 2
  • 7