First usable version based on AngularJS 2! Almost no converters yet, though.

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 typings/
 app/**/*.js
 app/**/*.js.map
+npm-debug.log

app/InputcomponentmanagerService.ts

@@ -0,0 +1,41 @@
+import {Injectable} from "@angular/core";
+@Injectable()
+export class InputcomponentmanagerService {
+    private components:any[] = [];
+
+    public constructor() {
+    }
+
+    public register(component:any):void {
+        this.components.push(component);
+    }
+
+    public getAllComponents():any[] {
+        return this.components;
+    }
+
+    public getNext(component:any):any {
+        let index:number = component.index;
+        if (index == this.components.length - 1) {
+            this.addComponent();
+        }
+        return this.components[index + 1];
+    }
+
+    public getFirst():any {
+        if (this.components.length == 0) {
+            this.addComponent();
+        }
+        return this.components[0];
+    }
+
+    private addComponent():void {
+        this.register({
+            content: "",
+            selectedConverter: undefined,
+            index: this.components.length,
+            error: false,
+            message: ""
+        });
+    }
+}

app/app.component.html

@@ -1,3 +1,9 @@
-<div>
-    <den-inputarea></den-inputarea>
+<div *ngFor="let step of steps" class="wrapper">
+    <textarea class="input" (change)="update(step)" placeholder="Please enter your input ..."
+              [(ngModel)]="step.content">{{step.content}}</textarea>
+    <select class="conversion" (change)="convert(step, $event)">
+        <option id="-1">Select conversion ...</option>
+        <option *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}</option>
+    </select>
+    <div class="message" *ngIf="step.error">{{step.message}}</div>
 </div>

app/app.component.ts

@@ -1,26 +1,57 @@
-import {Component} from "@angular/core";
-import {OnInit}from "@angular/core";
-
+import {Component, OnInit} from "@angular/core";
 import {ConverterregistryService} from "./converterregistry.service";
-import {Converter} from "./converter";
+import {InputcomponentmanagerService} from "./InputcomponentmanagerService";
+import {Converter} from "./converter/converter";
 
 @Component({
     moduleId: module.id,
     selector: "den-app",
     templateUrl: "app.component.html",
     styleUrls: ["app.component.css"],
-    providers: [ConverterregistryService]
+    providers: [ConverterregistryService, InputcomponentmanagerService]
 })
 export class AppComponent extends OnInit {
-    constructor(private converterregistryService:ConverterregistryService) {
+    public steps:any[] = [];
+    public converters:Converter[] = [];
+
+    constructor(private converterregistryService:ConverterregistryService, private inputcomponentmanagerService:InputcomponentmanagerService) {
         super();
     }
 
-    ngOnInit():void {
-        let converters:Converter[] = this.converterregistryService.getConverters();
-        console.log("Number of registered converters: " + converters.length);
-        for (let i = 0; i < converters.length; i++) {
-            console.log("Converter " + converters[i].getId() + ": " + converters[i].getDisplayname());
+    convert(step:any, $event:any):void {
+        step.selectedConverter = this.converterregistryService.getConverter($event.target.selectedOptions[0].id);
+        this.update(step);
+    }
+
+    update(step:any):void {
+        let converter:Converter = step.selectedConverter;
+
+        if (converter !== undefined) {
+            let content:string = step.content;
+            let result:string;
+            try {
+                result = converter.convert(content);
+            } catch (error) {
+                result = null;
+            }
+            if (result === null) {
+                step.message = "Error converting. Not applicable?";
+                step.error = true;
+            } else {
+                step.message = "";
+                step.error = false;
+                if (result !== "") {
+                    let nextComponent:any = this.inputcomponentmanagerService.getNext(step);
+                    nextComponent.content = result;
+                    this.update(nextComponent);
+                }
+            }
         }
     }
+
+    ngOnInit():void {
+        this.converters = this.converterregistryService.getAllConverters();
+        this.steps = this.inputcomponentmanagerService.getAllComponents();
+        this.inputcomponentmanagerService.getFirst();
+    }
 }

app/app.module.ts

@@ -1,8 +1,7 @@
-import {NgModule} from '@angular/core'
-import {BrowserModule} from '@angular/platform-browser'
-import {FormsModule} from '@angular/forms'
-
-import {AppComponent} from './app.component'
+import {NgModule} from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import {FormsModule} from "@angular/forms";
+import {AppComponent} from "./app.component";
 import {InputareaComponent} from "./inputarea.component";
 
 @NgModule({

app/converter/base64decoder.ts

@@ -1,4 +1,4 @@
-import {Converter} from './converter';
+import {Converter} from "./converter";
 
 export class Base64Decoder implements Converter {
     getDisplayname():string {

app/converter/base64encoder.ts

@@ -1,4 +1,4 @@
-import {Converter} from './converter';
+import {Converter} from "./converter";
 
 export class Base64Encoder implements Converter {
     getDisplayname():string {

app/converterregistry.service.ts

@@ -1,8 +1,7 @@
-import {Injectable} from '@angular/core';
-
-import {Converter} from './converter';
-import {Base64Encoder} from "./base64encoder";
-import {Base64Decoder} from "./base64decoder";
+import {Injectable} from "@angular/core";
+import {Converter} from "./converter/converter";
+import {Base64Encoder} from "./converter/base64encoder";
+import {Base64Decoder} from "./converter/base64decoder";
 
 @Injectable()
 export class ConverterregistryService {
@@ -12,7 +11,7 @@ export class ConverterregistryService {
         this.init();
     }
 
-    public getConverters():Converter[] {
+    public getAllConverters():Converter[] {
         return this.converters;
     }
 

app/inputarea.component.html

@@ -1,8 +1,15 @@
-<div id="wrapper-{{index}}" class="wrapper">
-    <textarea id="input-{{index}}" class="input" (change)="update()" placeholder="Please enter your input ..."
-              [(ngModel)]="conversion.content">{{conversion.content}}</textarea>
-    <select id="type-{{index}}" class="conversion" (change)="convert($event)">
-        <option id="-1">Select conversion ...</option>
-        <option *ngFor="let c of conversions" id="{{c}}">Type {{ConversionType[c]}}</option>
-    </select>
-</div>
+<!--<div id="wrapper-{{index}}" class="wrapper">-->
+<!--<textarea id="input-{{index}}" class="input" (change)="update()" placeholder="Please enter your input ..."-->
+<!--[(ngModel)]="conversion.content">{{conversion.content}}</textarea>-->
+<!--<select id="type-{{index}}" class="conversion" (change)="convert($event)">-->
+<!--<option id="-1">Select conversion ...</option>-->
+<!--<option *ngFor="let c of conversions" id="{{c}}">Type {{ConversionType[c]}}</option>-->
+<!--</select>-->
+<!--</div>-->
+
+<textarea class="input" (change)="update()" placeholder="Please enter your input ..."
+          [(ngModel)]="content">{{content}}</textarea>
+<select class="conversion" (change)="convert($event)">
+    <option id="-1">Select conversion ...</option>
+    <option *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}</option>
+</select>

app/inputarea.component.ts

@@ -1,6 +1,7 @@
-import {Component} from "@angular/core";
-import {ConversionInput} from "./conversioninput";
-import {ConversionType} from "./conversiontype";
+import {Component, OnInit} from "@angular/core";
+import {ConverterregistryService} from "./converterregistry.service";
+import {Converter} from "./converter/converter";
+import {InputcomponentmanagerService} from "./InputcomponentmanagerService";
 
 
 @Component({
@@ -9,40 +10,38 @@ import {ConversionType} from "./conversiontype";
     templateUrl: "inputarea.component.html",
     styleUrls: ["inputarea.component.css"]
 })
-export class InputareaComponent {
-    public index:number = 0;
-    public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64];
-    private conversion:ConversionInput;
-    // private ConversionType:ConversionType = ConversionType;
+export class InputareaComponent extends OnInit {
+    public converters:Converter[] = [];
+    public content:string = '';
+    private selectedConverter:Converter;
 
-    constructor() {
-        console.log("Aloha, " + this.index);
-        this.conversion = new ConversionInput();
-        this.conversion.content = "";
-        this.conversion.type = ConversionType.DECODE_BASE64;
-    }
-
-    public update():void {
-        console.log(this.conversion.content);
+    constructor(private converterregistryService:ConverterregistryService, private inputcomponentmanagerService:InputcomponentmanagerService) {
+        super();
     }
 
     public convert(e):void {
-        this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id);
-        console.log(this.conversion.type);
-        switch (this.conversion.type) {
-            case ConversionType.DECODE_BASE64:
-                this.conversion.content = "Base64 decode";
-                break;
-            case ConversionType.ENCODE_BASE64:
-                this.conversion.content = "Base64 encode";
-                break;
-            default:
-                this.conversion.content = "Unknown: " + this.conversion.type;
-                break;
+        this.selectedConverter = this.converterregistryService.getConverter(e.target.selectedOptions[0].id);
+        this.update();
+    }
+
+    public update():void {
+        if (this.selectedConverter !== undefined) {
+            let result:string = this.selectedConverter.convert(this.content);
+            let nextComponent:InputareaComponent = this.inputcomponentmanagerService.getNext(this);
+            if (nextComponent !== undefined) {
+                nextComponent.setContent(result);
+            }
         }
     }
 
-    public setIndex(index:number):void {
-        this.index = index;
+    public setContent(content:string):void {
+        this.content = content;
+        this.update();
+    }
+
+    ngOnInit():void {
+        this.converters = this.converterregistryService.getAllConverters();
+        this.selectedConverter = undefined;
+        this.inputcomponentmanagerService.register(this);
     }
 }

app/main.ts

@@ -1,5 +1,4 @@
 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
-
 import {AppModule} from "./app.module";
 
 platformBrowserDynamic().bootstrapModule(AppModule);

dencode.css

@@ -59,6 +59,13 @@ div.wrapper {
 	padding: 0.5em;
 }
 
+div.wrapper div.message {
+	display: inline-block;
+	color: #f00;
+	background-color: #fff;
+	border: 1px solid #f00;
+}
+
 textarea.input {
 	border-style: solid;
 	border-width: 1px;