[Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges

Let's say the message list can Input (messages) from parent component, and what we want to do is when there are new message, we will scroll message list to the bottom to show the lastest message.

 

import {Component, Input, ViewChild, OnChanges, SimpleChanges} from '@angular/core';
import {last} from 'lodash';

@Component({
  selector: 'message-list',
  templateUrl: './message-list.component.html',
  styleUrls: ['./message-list.component.css']
})
export class MessageListComponent implements OnChanges{

  @Input() messages;

  @ViewChild('list') list;

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['messages']) {
      const previous = changes['messages'].previousValue;
      const current = changes['messages'].currentValue;
      if(previous.length < current.length) {
        setTimeout(() => this.scrollToBottom());
      }
    }
  }

  scrollToBottom(): void {
    const items = this.list.nativeElement.querySelectorAll('li');
    const lastItem: any = last(items);
    lastItem.scrollIntoView();
  }
}