I have done some reading and investigation on this error, but not sure what the correct answer is for my situation. I understand that in dev mode, change detection runs twice, but I am reluctant to use enableProdMode()
to mask the issue.
Here is a simple example where the number of cells in the table should increase as the width of the div expands. (Note that the width of the div is not a function of just the screen width, so @Media cannot easily be applied)
My HTML looks as follows (widget.template.html):
<div #widgetParentDiv class=Content>
<p>Sample widget</p>
<table><tr>
<td>Value1</td>
<td *ngIf=widgetParentDiv.clientWidth>350>Value2</td>
<td *ngIf=widgetParentDiv.clientWidth>700>Value3</td>
</tr></table>
This on its own does nothing. I'm guessing this is because nothing is causing change detection to occur. However, when I change the first line to the following, and create an empty function to receive the call, it starts working, but occasionally I get the 'Expression has changed after it was checked error'
<div #widgetParentDiv class=Content>
gets replaced with
<div #widgetParentDiv (window:resize)=parentResize(10) class=Content>
My best guess is that with this modification, change detection is triggered and everything starts responding, however, when the width changes rapidly the exception is thrown because the previous iteration of change detection took longer to complete than changing the width of the div.
- Is there a better approach to triggering the change detection?
- Should I be capturing the resize event through a function to ensure
change detection occurs? - Is using #widthParentDiv to access the
width of the div acceptable? - Is there a better overall solution?
For more details on my project please see this similar question.
Thanks