TBConsoleClient/src/app/app.component.html

<div class="wrapper">
  <mat-card fxFlex="80">
    <mat-card-title>Techblox console</mat-card-title>
    <mat-card-content fxLayout="column">
      <div class="logMessages" #logMessagesContainer>
        <pre>{{ logMessages }}</pre>
      </div>
      <form>
        <mat-form-field fxFlex="100">
          <input matInput type="text" placeholder="Enter a command..." [formControl]="commandControl"
                 [matAutocomplete]="commandCompletion" (focus)="commands.length || getCommandList()"
          (keyup.arrowUp)="previousCommand()" (keyup.arrowDown)="nextCommand()"/>
        </mat-form-field>
        <mat-autocomplete #commandCompletion="matAutocomplete">
          <mat-option *ngFor="let cmd of displayedCommands" [value]="cmd.command">
            {{ cmd.line }}
          </mat-option>
        </mat-autocomplete>
        <button mat-raised-button class="mat-primary" (click)="sendCommand()">Send</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>