title: angular 5 ViewChild clientHeight, scrollTop, scrollHeight are all zero after
body: <p>I have a component With scrollable content.
  However when I try to get the dimension of the scrollable content in angular using the ViewChild I get zero for all values, however if I use jQuery to grab the element I get the correct values. Why is this happening? How should I get the correct dimensions in Angular? I verified both have the same element, but I believe angular not have the correct values or element perhaps? Looking in the console both jQuery and Angular seem to have the same element judging by the css classes and html name.. </p>
  
  <p>template:</p>
  
  <pre><code>&lt;div class="container-fluid px-5 py-5 scrolled-contents" style="display:inline-block" #scrolledContents&gt;
  
    &lt;div class="row"&gt;
    ...content
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controller code:</p>
  
  <pre><code>export class ScrollContainer implements OnInit {
  
    @ViewChild('scrolledContents') private scrollContainer: ElementRef;
  
    @HostListener("window:scroll", [])
    onScroll(): void {
      const jQueryelement = $(".scrolled-contents")[0];
      const angularElement = this.scrollContainer.nativeElement;
      // angularElement.clientHeight == 0, angularElement.offsetHeight == 0, angularElement.scrollTop == 0, etc
      // jQueryElement.clientHeight == correctValue, jQueryElement.offsetHeight == correct value, jQueryElement.scrollTop == correctValue 
    }
  </code></pre>
  
  <p>Please help ?</p>