externalized templates and styles (styles are still empty)

app/app.component.html

@@ -0,0 +1,3 @@
+<div>
+    <den-inputarea></den-inputarea>
+</div>

app/app.component.ts

@@ -5,12 +5,10 @@ import {InputareaComponent} from "./inputarea.component";
 //import { SelectorComponent } from "./selector.component";
 
 @Component({
+    moduleId: module.id,
     selector: "den-app",
-    template: `
-    <div>
-    <den-inputarea></den-inputarea>
-    </div>
-    `
+    templateUrl: "app.component.html",
+    styleUrls: ["app.component.css"]
 })
 export class AppComponent {
     // private inputAreas:InputareaComponent[] = [];

app/conversioninput.ts

@@ -1,4 +1,4 @@
-import { ConversionType} from "./conversiontype";
+import {ConversionType} from "./conversiontype";
 
 export class ConversionInput {
     public content:string;

app/inputarea.component.html

@@ -0,0 +1,8 @@
+<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>

app/inputarea.component.ts

@@ -1,37 +1,31 @@
-import { Component } from "@angular/core";
-import { ConversionInput } from "./conversioninput";
-import { ConversionType } from "./conversiontype";
+import {Component} from "@angular/core";
+import {ConversionInput} from "./conversioninput";
+import {ConversionType} from "./conversiontype";
 
 
 @Component({
+    moduleId: module.id,
     selector: "den-inputarea",
-    template: `
-        <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>
-    `
+    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;
-    
+
     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);
     }
-    
+
     public convert(e):void {
         this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id);
         console.log(this.conversion.type);
@@ -47,7 +41,7 @@ export class InputareaComponent {
                 break;
         }
     }
-    
+
     public setIndex(index:number):void {
         this.index = index;
     }