room-join.component.html

<form (ngSubmit)="joinRoom(roomId.value)">
    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
      <mat-form-field class="input-block">
        <input matInput #roomId placeholder="{{ 'home-page.session-id' | translate}}" [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="primary" type="submit">
        <mat-icon>input</mat-icon>
      </button>
    </div>
</form>
<button mat-button color="primary" (click)="joinDemo()">{{ 'home-page.join-demo-session' | translate}}<mat-icon>lightbulb_outline</mat-icon></button>