Added scroll to bottom when page loads and when new message is inserted

Author: stas-antokhi

.idea/.gitignore

@@ -1,5 +1,7 @@
-<div class="message-container">
+<div class="message-container" #container >
 
   <app-message *ngFor="let message of (messages$ | async)" [message]="message"></app-message>
 
+  <div #flag></div>
+
 </div>

.idea/modules.xml

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {MessageService} from "../../services/message.service";
 import {Message} from "../../models/message";
 import {Observable} from "rxjs";
@@ -8,15 +8,26 @@ import {Observable} from "rxjs";
   templateUrl: './messages-container.component.html',
   styleUrls: ['./messages-container.component.scss']
 })
-export class MessagesContainerComponent implements OnInit {
+export class MessagesContainerComponent implements OnInit, AfterViewInit {
 
+  @ViewChild('flag') private flag: ElementRef<HTMLDivElement>;
   messages$: Observable<Message[]>;
 
   constructor(private messageService: MessageService) { }
 
   ngOnInit(): void {
-   this.messages$ = this.messageService.getChatMessages();
+    this.messageService.onMessageSent$.subscribe(() => this.scrollBottom('smooth', 150));
+    this.messages$ = this.messageService.getChatMessages();
+  }
+
+  ngAfterViewInit(): void {
+    this.scrollBottom();
+  }
 
+  scrollBottom(behavior: ScrollBehavior = "auto", delay: number = 70): void {
+    setTimeout(() => {
+      this.flag.nativeElement.scrollIntoView({block: "end", behavior: behavior})
+    }, delay);
   }
 
 }

.idea/restheart-webchat.iml

@@ -12,6 +12,9 @@ import { map } from "rxjs/operators";
 })
 export class MessageService {
 
+  private onMessageSent: Subject<string> = new Subject();
+  onMessageSent$ = this.onMessageSent.asObservable();
+
   private configuration: WebSocketSubjectConfig<Message> = {
     url: environment.MESSAGE_FEED,
     openObserver: {
@@ -52,7 +55,7 @@ export class MessageService {
   sendMessage(body: string): void {
     const message: Message = { body, timestamp: new Date(), nickname: this.userService.getCurrentUser() };
 
-    this.http.post(environment.MESSAGE_URL, message).subscribe();
+    this.http.post(environment.MESSAGE_URL, message).subscribe(() => this.onMessageSent.next('sent'));
   }