scroll to bottom of message box is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -39,7 +39,7 @@
     mode="indeterminate"
   ></mat-progress-bar>
   <!-- CHAT CONTENT -->
-  <div fxFlex="1 1 auto" class="chat-content">
+  <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
     <!-- CHAT MESSAGES -->
     <ucap-chat-messages
       [messages]="eventList$ | async"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -1,4 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterViewChecked,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
@@ -19,7 +26,10 @@ import { tap } from 'rxjs/operators';
   styleUrls: ['./messages.component.scss'],
   animations: ucapAnimations
 })
-export class MessagesComponent implements OnInit, OnDestroy {
+export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @ViewChild('messageBoxContainer', { static: true })
+  private messageBoxContainer: ElementRef;
+
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   eventList$: Observable<Info[]>;
@@ -61,6 +71,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
     this.eventList$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoList)
     );
+
+    this.scrollToBottomForMessageBoxContainer();
   }
 
   ngOnDestroy(): void {
@@ -72,6 +84,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngAfterViewChecked(): void {
+    this.scrollToBottomForMessageBoxContainer();
+  }
+
   selectContact() {}
 
   onSendMessage(message: string) {
@@ -86,4 +102,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
       })
     );
   }
+
+  private scrollToBottomForMessageBoxContainer(): void {
+    try {
+      this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
+    } catch (err) {}
+  }
 }