Move scrolling logic to MessagesComponent

src/app/dashboard/dashboard.component.html

@@ -1,10 +1,8 @@
 <div [attr.class]="layout | async">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
-    <div [ngClass]="{'hide-attribute': hideMessages | async}"
+    <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
-         class="tfw-messages"
+      <app-messages></app-messages>
-         #tfwmessages>
-      <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
     </div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{'deploy-blur': deploying || (polling | async)}">

src/app/dashboard/dashboard.component.ts

@@ -7,6 +7,7 @@ import { DashboardConfigService } from '../services/config.service';
 import { HttpClient } from '@angular/common/http';
 import { delay, retryWhen, tap } from 'rxjs/operators';
 import { FSMUpdateService } from '../services/fsmupdate.service';
+import { MessagesComponent } from '../messages/messages.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,7 +19,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   polling = new BehaviorSubject<boolean>(false);
   deploymentNotificationSubscription: Subscription;
   @ViewChild('webiframe', {static: false}) webiframe: ElementRef;
-  @ViewChild('tfwmessages', {static: false}) messages: ElementRef;
+  @ViewChild(MessagesComponent, {static: false}) messages: MessagesComponent;
   @ViewChild('urlbar', {static: false}) urlbar: ElementRef;
 
   layout = this.configService.layout;
@@ -69,7 +70,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   subscribeResizeOnLayoutChange() {
     this.configService.layout.subscribe(() => {
       this.emitResizeEvent();
-      setTimeout(() => this.scrollMessagesToBottom(), 0);
+      setTimeout(() => this.messages.scrollToBottom(), 0);
     });
   }
 
@@ -132,13 +133,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.terminalMenuItem.next(item);
   }
 
-  scrollMessagesToBottom() {
-    const element = this.messages.nativeElement;
-    // This must be done in the Angular event loop to avoid messing up
-    // change detection (not in the template like ConsoleComponent does)
-    element.scrollTop = element.scrollHeight;
-  }
-
   iframeLoad() {
     if (this.webiframe && this.iframeUrl.value) {
       const href = this.webiframe.nativeElement.contentWindow.frames.location.href;

src/app/messages/messages.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
 import { MessageData, Message } from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
@@ -19,7 +19,8 @@ export class MessagesComponent implements OnInit {
   constructor(
     private markdownService: MarkdownService,
     private websocketService: WebSocketService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private ref: ElementRef
   ) {}
 
   ngOnInit() {
@@ -27,6 +28,7 @@ export class MessagesComponent implements OnInit {
       message => {
         this.writeMessage(message);
         this.newMessageEvent.emit();
+        this.scrollToBottom();
     });
 
     this.websocketService.connect();
@@ -41,6 +43,11 @@ export class MessagesComponent implements OnInit {
     this.changeDetectorRef.detectChanges();
   }
 
+  scrollToBottom() {
+    const element = this.ref.nativeElement.parentElement;
+    element.scrollTop = element.scrollHeight;
+  }
+
   transformMessage(message: MessageData) {
     message.message = this.convertMarkdownToHTML(message.message);
     if (!message.timestamp) {