Example plunker: http://plnkr.co/edit/YLLslImGOpS8u6zx
In the plunker, I display the height and width of a div from the parent component using ViewChild.
I pass the div from the parent component to the child component as an Input HTMLElement, and in the child component, I again read the currentValue of this input. If you open the browser console, I logged the SimpleChanges object. If you look at the currentValue.offsetHeight, the height is the expected value (i.e. the value matches what the parent component is displaying)
However, the child component is displaying a different value from the expected.
Whats even stranger is if you edit the child component template to something like:
<div>
<p>Child: {{ display }}</p>
</div>
Simply adding some additional content in the div, the child component now displays the expected value (i.e. the value matches what the parent component is displaying, and it matches the value in SimpleChanges)
To put it simply, why does this difference occur?
In my code-base, I'm experiencing an issue using offsetHeight where the value within SimpleChanges is accurate, but the value I try to store on an instance variable and use within the component is inaccurate. This plunker probably does not emulate exactly the issue I face in my code-base but maybe understanding the cause/effects of what I described above might help me figure out the problem I face in my code-base.
Thanks!