<div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="50px" fxFill>
<form (ngSubmit)="joinRoom(roomId.value)">
  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
    <mat-form-field class="number">
      <input matInput #roomId placeholder="Session-Id" [formControl]="roomFormControl"
             [errorStateMatcher]="matcher" maxlength="8"/>
      <mat-hint align="end">{{roomId.value.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<mat-icon color="accent">lightbulb_outline</mat-icon></button>
</div>