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?

Answer 1

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