Add room-creation component with two inputs (long and short name) and a next-button

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { RegisterComponent } from './register/register.component';
 import { PasswordResetComponent } from './password-reset/password-reset.component';
 
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {
@@ -44,6 +45,7 @@ import {
   MatToolbarModule,
   MatTooltipModule
 } from '@angular/material';
+import { RoomCreationComponent } from './room-creation/room-creation.component';
 import { LoginScreenComponent } from './login-screen/login-screen.component';
 import { NotificationService } from './notification.service';
 
@@ -54,7 +56,8 @@ import { NotificationService } from './notification.service';
     LoginScreenComponent,
     PageNotFoundComponent,
     PasswordResetComponent,
-    RegisterComponent
+    RegisterComponent,
+    RoomCreationComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -65,6 +68,7 @@ import { NotificationService } from './notification.service';
     BrowserModule,
     BrowserAnimationsModule,
     FlexLayoutModule,
+    FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatButtonToggleModule,

src/app/room-creation/room-creation.component.html

+<mat-form-field>
+  <input matInput #longRoomName class="input-block" type="text" placeholder="name" maxlength="50" [(ngModel)]="longName"/>
+  <mat-hint align="start"><strong>max. letters / signs:</strong> </mat-hint>
+  <mat-hint align="end">{{longRoomName.value.length}} / 50</mat-hint>
+  <button mat-button *ngIf="longName" matSuffix mat-icon-button aria-label="Clear" (click)="longName=''">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-form-field>
+
+<mat-form-field>
+  <input matInput #shortRoomName class="input-block" type="text" placeholder="short name" maxlength="8" [(ngModel)]="shortName"/>
+  <mat-hint align="start"><strong>max. letters / signs:</strong> </mat-hint>
+  <mat-hint align="end">{{shortRoomName.value.length}} / 8</mat-hint>
+  <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-form-field>
+<button mat-fab color="primary">
+  <mat-icon>navigate_next</mat-icon>
+</button>

src/app/room-creation/room-creation.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomCreationComponent } from './room-creation.component';
+
+describe('RoomCreationComponent', () => {
+  let component: RoomCreationComponent;
+  let fixture: ComponentFixture<RoomCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoomCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoomCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/room-creation/room-creation.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-room-creation',
+  templateUrl: './room-creation.component.html',
+  styleUrls: ['./room-creation.component.scss']
+})
+export class RoomCreationComponent implements OnInit {
+  longName: string;
+  shortName: string;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}