Refactor input fields, converter selectors and error messages into their own components.

src/app/text-input-field/text-input-field.component.html

@@ -0,0 +1,4 @@
+<div class="textwrapper arrow_box">
+    <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
+              [(ngModel)]="step.content">{{step.content}}</textarea>
+</div>

src/app/text-input-field/text-input-field.component.scss

@@ -0,0 +1,69 @@
+.textwrapper {
+  margin: 0 0 1em 0;
+  padding: 0 1em 0 0;
+}
+
+.arrow_box {
+  position: relative;
+  background: #fff;
+  border: 1px solid #aaa;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
+  &:after, &:before {
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #fff;
+    border-width: 1em;
+    margin-left: -1em;
+  }
+  &:before {
+    border-color: rgba(170, 170, 170, 0);
+    border-top-color: #aaa;
+    border-width: calc(1em + 1px);
+    margin-left: calc(-1em - 1px);
+  }
+  &:focus:before {
+    border-color: rgba(136, 136, 136, 0);
+    border-top-color: #888;
+  }
+  &:hover:before {
+    border-color: rgba(51, 51, 51, 0);
+    border-top-color: #333;
+  }
+}
+
+.textinput {
+  background-color: #fff;
+  border: none;
+  color: #000;
+  font-family: "Free Monospaced", monospace;
+  height: 10em;
+  margin: 0;
+  padding: 0.5em;
+  resize: vertical;
+  width: 100%;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
+}
+
+.errormessage {
+  color: red;
+  text-align: center;
+}

src/app/text-input-field/text-input-field.component.spec.ts

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

src/app/text-input-field/text-input-field.component.ts

@@ -0,0 +1,45 @@
+import {Component, Input} from '@angular/core';
+import {Step} from '../step';
+import {Converter} from '../converter/converter';
+import {InputComponentManagerService} from '../input-component-manager.service';
+
+@Component({
+  selector: 'app-text-input-field',
+  templateUrl: './text-input-field.component.html',
+  styleUrls: ['./text-input-field.component.scss']
+})
+export class TextInputFieldComponent {
+  @Input()
+  public step: Step;
+
+  constructor(private inputComponentManagerService: InputComponentManagerService) {
+  }
+
+  update(step: Step): void {
+    const converter: Converter = step.selectedConverter;
+
+    if (converter !== undefined) {
+      const content: string = step.content;
+      let result: string;
+      try {
+        result = converter.convert(content);
+      } catch (error) {
+        if (typeof console === 'object' && typeof console.log === 'function') {
+          console.log(error);
+        }
+        step.message = error.message;
+        step.error = true;
+        result = null;
+      }
+      if (result !== null) {
+        step.message = '';
+        step.error = false;
+        if (result !== '') {
+          const nextComponent: Step = this.inputComponentManagerService.getNext(step);
+          nextComponent.content = result;
+          this.update(nextComponent);
+        }
+      }
+    }
+  }
+}