0

I'm getting following error on [height] on main component and looking for solution

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '753'. Current value: '731'.

I have three components that need to be rendered in a fixed size panel.

Depending on how many top components and bottom components are rendered in the screen, the main component size(height) should be changed.

only solution I have find is using offsetHeight, but the error is thrown on angular.

I know I can solve this using jQuery or Javascript? But looking for a pure Angular solution.

  <div #panelbody>
    <div #top>
      <top *ngFor="let top of tops; let i = index" [index]="i"></top>
    </div>
    <main [height]="panelbody.offsetHeight - top.offsetHeight - bottom.offsetHeight - 10"></main>
    <div #bottom class="text-center">
      <bottom *ngFor="let bottom of bottoms(); let i = index" [index]="i">
      </bottom>
    </div>
  </div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
e-j5
  • 1,759
  • 1
  • 11
  • 23
  • Possible duplicate of [Expression \_\_\_ has changed after it was checked](https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked) – AT82 Jun 29 '17 at 07:37
  • Read [Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) – Max Koretskyi Jul 10 '17 at 10:22

1 Answers1

0

Seems this error is only popping up in dev mode, and not in production mode. But what the error means is that there are some changes happening to the bound [height] property right after a change detection cycle, which are not reflected until the next change detection cycle occurs. Refer this issue on github

HashanMadz
  • 61
  • 3