title: angular div scrollTop property is not setting
body: <p>In my angular app, I have a div which displays a table. The table dynamically increase its height depending on rows we add. As soon as the table gets updated with the new rows, I need to show the scrollbar at the end of the div.</p>
  
  <p>I added a reference element to DIV and using that in component file to set the scrollTop.
  But the scrollTop is not setting set.</p>
  
  <pre><code>&lt;div #scrollDiv &gt;
  &lt;table&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  @ViewChild('scrollDiv') private myScrollDiv: ElementRef;
  
  testUpdateTable() {
      this.myScrollDiv.nativeElement.scrollTop = this.myScrollDiv.nativeElement.height;
  }
  
  &lt;button type="button" id="btn" class="btn-primary" (click)="testUpdateTable()" &gt;Update List&lt;/button&gt;  
  </code></pre>
  
  <p>If I set that property on DIV directly, it does work, but one point I need to clear the table, when cleared I get uncheckedexpression error.</p>
  
  <p>This works:</p>
  
  <pre><code>&lt;div #scrollDiv [scrollTop]="scrollDiv.scrollHeight"&gt;
  &lt;table&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>