Angular Error: ExpressionChangedAfterItHasBeenCheckedError

Question

I have a little problem with Angular 4. The error below is thrown

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '225px'. Current value: '-21150px'.

Here's my html:

<div class="channelRow" *ngFor="let epgChannel of channelGroupEpg?.epgChannels">
    <div class="epgChannelList">
      {{epgChannel.channel.name}}
    </div>
    <template ngFor let-epgDate [ngForOf]="epgChannel.dates">
        <div class="epgEntry" 
          *ngFor="let epgProgram of epgDate.programs" 
          [style.width]="getWidth(epgProgram, epgDate.date)" 
          (click)="selectProgram(epgProgram)" 
          data-toggle="modal" 
          data-target="#detailModal">
            {{epgProgram.title}}
        </div>
    </template>
</div>

And this is where the error comes from:

getWidth(program: EPGProgram, date: Date) {
  let min = this.helperService.getDurationByProgramInMinutes(program);
  let startDate = new Date(program.start.getFullYear(), program.start.getMonth(), program.start.getDate(), 0, 0, 0, 0);
  let stopDate = new Date(program.stop.getFullYear(), program.stop.getMonth(), program.stop.getDate(), 0, 0, 0, 0);
  if (startDate.getTime() !== date.getTime()) {
      let minNextDay = this.helperService.getMinutesToNextDay(program.start, date);
      min = min - minNextDay;
  } 
  if (stopDate.getTime() !== date.getTime()) {
      let minNextDay = this.helperService.getMinutesToLastDay(program.stop, date);
      min = min - minNextDay;
  }
  let width = min * 5;
  return width.toString() + 'px';
}

Can someone tell me, why this is the case?

This post could be the solution. https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained — codelovesme, Jun 11 '17 at 15:14
[Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://medium.com/@maximus.koretskyi/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) explains this behavior in great details — Max Koretskyi, Jul 02 '17 at 05:24

score 6 · Answer 1 · answered Nov 05 '17 at 20:16

6

Component state was changed after it was checked ...

use

this._changeDetectionRef.detectChanges();

at the end of your method, not forgetting to add

private _changeDetectionRef : ChangeDetectorRef

as parameter of the constructor of the Component owning your method.

See discution here

answered Nov 05 '17 at 20:16

user1767316

3,276
3
37
46

this is after 48 hours of search the solution to my problem. – Tobias Gassmann Aug 10 '18 at 15:04

score 3 · Answer 2 · answered Jun 23 '17 at 07:42

This error occurs because you are changing the variable before the angular ouput the HTML. So, what you can do is. change your variable when the content is loaded. solution.

import { AfterContentInit } from '@angular/core';

ngAfterContentInit(){
   // write your code here
}

score 1 · Answer 3 · answered May 17 '17 at 08:08

1

A quick fix would be to put your code inside a setTimeout().

answered May 17 '17 at 08:08

Nguyễn Việt Trung

283
1
6

score 0 · Answer 4 · answered May 17 '17 at 07:06

0

I had same error outputed. After long research I found out that it's caused when the data that are inputted to html template has changed before angular refresh the html. This error won't be displayed when you switch to production mode. See this issue for more information.

answered May 17 '17 at 07:06

Patryk Brejdak

1,571
14
26

3

The error won't be displayed in prod mode but that doesn't mean you should ignore it. – eko May 17 '17 at 07:07
Yes, of couse, but sometimes you can do nothing about it. For example I had problems with translations in html via pipe, i couldn't find way to run another new change detection round. So far it wasn't caused any problem – Patryk Brejdak May 17 '17 at 07:14
@Szarik, _but sometimes you can do nothing about it_ - that's not true, see [this article](https://hackernoon.com/angulars-digest-is-reborn-in-the-newer-version-of-angular-718a961ebd3e#d14a) for more information about the cause – Max Koretskyi May 17 '17 at 07:16
@Maximus It could do the trick, but in my case I would have to mess up in third-party component which is responsible for translations – Patryk Brejdak May 17 '17 at 07:27
@Szarik, I don't know specifics of your case, I just showed where the cause is explained in detail – Max Koretskyi May 17 '17 at 07:38

Angular Error: ExpressionChangedAfterItHasBeenCheckedError

4 Answers4