angular: ExpressionChangedAfterItHasBeenCheckedError - HostBinding and Animations `.done`

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When I am using HostBinding and Animation .done and I update an property that is being using in HostBinding I am getting ExpressionChangedAfterItHasBeenCheckedError when the value is changed too quickly, even though I am using markForCheck.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
    at viewDebugError (errors.ts:30)
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:29)
    at checkBindingNoChanges (util.ts:145)
    at checkNoChangesNodeInline (view.ts:477)
    at checkNoChangesNode (view.ts:568)
    at debugCheckNoChangesNode (services.ts:557)
    at debugCheckRenderNodeFn (services.ts:500)
    at Object.eval [as updateRenderer] (AppComponent_Host.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (services.ts:477)
    at checkNoChangesView (view.ts:383)

Expected behavior

No error

Minimal reproduction of the problem with instructions

Below please find a simple reproduction; https://stackblitz.com/edit/expressionchangedafterithasbeencheckederror-hostbinding

To get the error, simply click the button quickly several times.

What is the motivation / use case for changing the behavior?

I believe that this shouldn’t be happening, I don’t have bidirectional data flow which might cause such issues, And I am explicitly saying that there are changes, as I am using markForCheck.

Environment

Angular 4.3.4

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 20 (5 by maintainers)

Most upvoted comments

Still an issue on 12.1.3

  @HostBinding('class.has-scroll') public get hasRemainingScroll(): boolean {
    const { scrollWidth, clientWidth, scrollLeft } = this.elementRef.nativeElement.querySelector('.ed-table-body');
    return scrollLeft + clientWidth < scrollWidth;
  }

dionatan-g on Sep 7, 2021

I’ve updated to 17.1.3, and I’ve also tried 17.2.0-rc.1. I’m still seeing errors for the non-Signal cases.

yea, we had an issue that required a rollback of the classic plain property and markForCheck support that made it into 17.1.3. If you check 17.1.2, you should see it working. We’ll need to determine if it’s something we can support again but generally signals are the way to go to avoid the error.

atscott on Feb 9, 2024

@reduckted a reproduction would be helpful. I have a suspicion about the cause but would like to verify.

atscott on Feb 2, 2024

OK I see the issue here, looking into it.

matsko on Oct 31, 2017