Autocomplete matches typed text, autoscroll

src/app/app.component.html

@@ -2,7 +2,7 @@
   <mat-card fxFlex="80">
     <mat-card-title>Techblox console</mat-card-title>
     <mat-card-content fxLayout="column">
-      <div class="logMessages">
+      <div class="logMessages" #logMessagesContainer>
         <pre>{{ logMessages }}</pre>
       </div>
       <form>
@@ -11,7 +11,7 @@
                  [matAutocomplete]="commandCompletion" (focus)="commands || getCommandList()"/>
         </mat-form-field>
         <mat-autocomplete #commandCompletion="matAutocomplete">
-          <mat-option *ngFor="let cmd of commands" [value]="cmd.command">
+          <mat-option *ngFor="let cmd of displayedCommands" [value]="cmd.command">
             {{ cmd.line }}
           </mat-option>
         </mat-autocomplete>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { FormControl } from '@angular/forms';
 
@@ -12,14 +12,22 @@ export class AppComponent {
   logMessages = '';
   commandControl: FormControl = new FormControl('');
   commands: { command: string, line: string }[] = [];
+  displayedCommands: { command: string, line: string }[] = [];
+
+  @ViewChild('logMessagesContainer') logMessagesView: ElementRef;
 
   constructor(private http: HttpClient) {
     this.getCommandList();
+    this.commandControl.valueChanges.subscribe(commandText => {
+      this.displayedCommands = this.commands.filter(cmd => cmd.command.toLowerCase().startsWith(commandText.toLowerCase()));
+    })
   }
 
   async sendCommand() {
     try {
-      const res = await this.http.post('http://localhost:8019/command', this.commandControl.value, {responseType: 'text'}).toPromise();
+      const command = this.commandControl.value;
+      this.commandControl.setValue('');
+      const res = await this.http.post('http://localhost:8019/command', command, {responseType: 'text'}).toPromise();
       this.logMessages += res + "\n";
     } catch (e) {
       if (e.status == 0)
@@ -27,10 +35,16 @@ export class AppComponent {
       else
         this.logMessages += e.message + "\n";
     }
+    await this.wait(50);
+    this.logMessagesView.nativeElement.scrollTop = this.logMessagesView.nativeElement.scrollHeight;
   }
 
   async getCommandList() {
     const res = await this.http.post('http://localhost:8019/commands', '', {responseType: 'text'}).toPromise();
     this.commands = res.split('\n').map(cmd => ({command: cmd.split(' - ')[0], line: cmd}));
   }
+
+  wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
 }