title: Angular: unable to scroll down to bottom in element
body: <p>I've been postponing fixing this error that I have been having for a while now. I have the below chatwindow:</p>
  
  <p><a href="https://i.stack.imgur.com/ySiDV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ySiDV.png" alt="enter image description here"></a></p>
  
  <p>The window where I display the messages is a separate component (chat-window.component.ts). I want to scroll to the bottom with ngOnChanges.</p>
  
  <p>When we receive the conversation with the messages from the parent component, where it is received from the server via an asynchronous request, we want to scroll to the bottom of the window element. We do this by calling the <code>this.scrollToBottom()</code> method of the class in the ngOnChanges lifecycle hook.</p>
  
  <p><strong>This.scrollToBottom does get called, but it doesn't scroll to the bottom of the element. Can someone see why?</strong></p>
  
  <p><strong>chat-window.component.ts: in ngOnchanges we do some synchronous stuff before we call this.scrollToBottom()</strong></p>
  
  <pre><code>export class ChatboxWindowComponent implements OnChanges, OnInit, AfterViewChecked {
  
    @Input('conversation') conversation;
    @ViewChild('window') window;
  
    constructor() { }
  
    ngOnChanges() {
      // If the date separators have already been added once, we avoid doing it a second time
      const existingDateObj = this.conversation.messages.findIndex((item, i) =&gt; item.dateObj);
  
      if (existingDateObj === -1) {
        this.conversation.messages.forEach( (item, index, array) =&gt; {
          if (index !== 0) {
            const date1 = new Date(array[index - 1].date);
            const date2 = new Date(item.date);
  
            if (date2.getDate() !== date1.getDate() || date2.getMonth() !== date1.getMonth()) {
              this.conversation.messages.splice(index, 0, {date: date2, dateObj: true});
              console.log(this.conversation.messages.length);
            }
          }
        });
      }
  
      this.scrollToBottom();
    }
  
    ngOnInit() {
    }
  
    ngAfterViewChecked() {
    }
  
    isItMyMsg(msg) {
      return msg.from._id === this.conversation.otherUser.userId;
    }
  
    scrollToBottom() {
      try {
        console.log('scrollToBottom called');
        this.window.nativeElement.top = this.window.nativeElement.scrollHeight;
      } catch (err) {}
    }
  }
  </code></pre>
  
  <p><strong>chat-window.component.html</strong></p>
  
  <pre><code>&lt;div #window class="window"&gt;
    &lt;ng-container *ngFor="let message of conversation.messages"&gt;
      &lt;div class="date-container" *ngIf="!message.msg; else windowMsg"&gt;
        &lt;p class="date"&gt;{{message.date | amDateFormat:'LL'}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;ng-template #windowMsg&gt;
        &lt;p
          class="window__message"
          [ngClass]="{
      'window__message--left': isItMyMsg(message),
      'window__message--right': !isItMyMsg(message)
      }"
        &gt;
          {{message.msg}}
        &lt;/p&gt;
      &lt;/ng-template&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>