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

[adrienboulle]

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

[DzmitryShylovich]

cc @tbosch

[jesussobrino]

@adrienboulle It's still happening in Angular 4.0.1. (I've just get updated)

[chrishandorf]

I'm on 4.0.1 and also getting this error

[ThomasKerbrat]

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 ;)

[adrienboulle]

@jesussobrino indeed i've checked the plunker which use @next and the error is still thrown

[tbosch]

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).

[adrienboulle]

@tbosch so it was a bug that it worked on angular@2.0.0->2.4.6 ?

[tbosch]

@adrienboulle yes, this was a bug before. In general, whenever you change a bound value during change detection, you should expect this kind of error...

[adrienboulle]

ok thanks :)

[gurachan]

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'.

[djejaquino]

@Dj-jom2x this just happened to me using Moment.js inside an "impure" pipe.

@tbosch, what can be done here?

[tmjssz]

@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

[gurachan]

i fix my issue ...
every new msg i sent .. i push 1 of them as old msg object array
then keep it 15 as max .. just replace and replace the top one and remove the last one ..

i always put new date xD as chat time ago inside new msg and old msg object array ... now i put in on variable at the top so the time ago will stay as is ..

btwi use socket io

[maxkoretskyi]

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.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}