room-join.component.html

<div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="50px" fxFill>
<form (ngSubmit)="joinRoom(roomId.value)">
  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
    <mat-form-field>
      <input matInput #roomId type="number" min="00000000" max="99999999" onkeydown="if(this.value.length === 8 && event.keyCode != 8) return false;" placeholder="Session-Id" [formControl]="roomFormControl"
             [errorStateMatcher]="matcher"/>
      <mat-hint align="end">{{roomId.value.split(' ').join(' ').length}} / 8</mat-hint>
      <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
      <mat-error *ngIf="roomFormControl.hasError('minlength')">{{ 'home-page.exactly-8' | translate}}</mat-error>
    </mat-form-field>
    <button mat-fab color="accent" type="submit">
      <mat-icon>input</mat-icon>
    </button>
  </div>
</form>
<button mat-button class="demo" color="primary" (click)="joinDemo()">Demo Session</button>
</div>