How do I dynamically scroll a <textarea> in Angular?

Question

I am writing a chat application where new messages are added to the bottom of a <textarea>. I want the textarea to scroll to the bottom because the chatlog is large.

How do I accomplish this?

I tried the following, and scrollTop attribute is not scrolling my textarea.

<textarea #chat class="form-control" rows=20 disabled [(ngModel)]="output" [scrollTop]="scroll" name="chatMessages"></textarea>

However, this.scroll=9999 does not change the binding of scrollTop to the value 9999. I console log this.scroll, and its value is 9999, but my textarea doesn't go to the bottom!

Please I need help, thanks!

Answer 1

I have figured out a much simpler approach, that will automatically scroll to the bottom, even when the ngModel is being changed in real time (chat). One just has to map the scrollTop property of the textarea with its current scrollHeight:

<textarea [(ngModel)]="..." #textarea [scrollTop]="textarea.scrollHeight"></textarea>