angular: ExpressionChangedAfterItHasBeenCheckedError when changing a component 'non model' value in afterViewInit

I’m submitting a …

[x] bug report
[ ] feature request
[ ] support request

Current behavior changing a component ‘non model’ value in afterViewInit throws ExpressionChangedAfterItHasBeenCheckedError if the value has an impact on a method used in the view.

in the plunker: -> getTextDecoration() returns none before ngAfterViewInit is called (isViewInit === false) -> getTextDecoration() returns underline after ngAfterViewInit is called (isViewInit === true)

Expected behavior it should not throw the error since getTextDecoration is just a method and not part of the model.

Minimal reproduction of the problem with instructions http://plnkr.co/edit/k8AsppUH8V2RvPeLJ0JT?p=preview

Angular version: 4.0.0 => KO
Angular version: 4.0.0-beta.8 => OK

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 15 (6 by maintainers)

Links to this issue

angular - ExpressionChangedAfterItHasBeenCheckedError Explained - Stack Overflow

Commits related to this issue

Found a dirty way to solve the ExpressionChangedAfterItHasBeenCheckedError. Look into: https://github.com/angular/angular/issues/14748 https://github.com/angular/angular/issues/15464 — committed to jfsebastian/FrontendExperiments by deleted user 7 years ago

Most upvoted comments

I had a similar issue when I wanted to dynamically create a component with resolveComponentFactory and inserting the created component back into the template. Looking at the lifecyle hooks documentation, I changed ngAfterViewInit to ngAfterContentInit and it worked.

Hope it helps 😉

+22

ThomasKerbrat on Apr 6, 2017

Check the Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error article for the in-depth explanation of the cause of the error and the need for the check that produces the error.

maxkoretskyi on Jul 1, 2017

@djejaquino this worked for me: How to manage Angular2 “expression has changed after it was checked” exception when a component property depends on current datetime

tmjssz on Apr 25, 2017

this happend to me if i use time ago pipe xD CboxComponent.html:37 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '49 minutes ago'. Current value: '50 minutes ago'.

gurachan on Apr 17, 2017

This is works as intended, as you are using getTextDecoration() in your template. Therefore Angular will call it whenever it dirty checks your template. I.e. Angular only looks at the resulting values of expressions…

In dev mode (i.e. you didn’t call enableProdMode()), angular does 2 dirty checks:

1x to apply new values and
1x afterwards to check that nothing has changed (to enforce the unidirectional data flow).

tbosch on Apr 7, 2017