title: How do I dynamically scroll a <textarea> in Angular?
body: <p>I am writing a chat application where new messages are added to the bottom of a <code>&lt;textarea&gt;</code>. I want the <code>textarea</code> to scroll to the bottom because the chatlog is large.</p>
  
  <p>How do I accomplish this?</p>
  
  <p>I tried the following, and <code>scrollTop</code> attribute is not scrolling my <code>textarea</code>. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;textarea #chat class="form-control" rows=20 disabled [(ngModel)]="output" [scrollTop]="scroll" name="chatMessages"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>However, <code>this.scroll=9999</code> does not change the binding of <code>scrollTop</code> to the value <code>9999</code>. I console log <code>this.scroll</code>, and its value is <code>9999</code>, but my <code>textarea</code> doesn't go to the bottom!</p>
  
  <p>Please I need help, thanks!</p>