--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/query-app.component.ts	Mon Mar 20 18:50:31 2017 +0100
@@ -0,0 +1,65 @@
+import {Component} from '@angular/core';
+//import {HTTP_PROVIDERS} from '@angular/http';
+
+import {QueryState} from './query-state';
+import {QueryStep} from './query-step';
+
+import {QueryService} from './query.service';
+import {NormalizationService} from './normalization.service';
+
+import {QuerySelectComponent} from './query-select.component';
+import {QueryResultComponent} from './query-result.component';
+//import {QueryResultTableComponent} from './query-result-table.component';
+
+@Component({
+    selector: 'query-app',
+    template: `
+    <div class="container">    
+        <h1>ISMI-Lab Query Builder</h1>
+    </div>
+    <div class="container">    
+        <div>Select a query step:</div>
+        <query-select *ngFor="let step of queryStepList; let i=index;"
+            [queryStep]="step" [index]="i" 
+            (queryChanged)="onQueryChanged($event)"></query-select>
+        <div>
+          <button (click)="addQueryStep()">add step</button>
+          <button (click)="removeQueryStep()">remove step</button>
+        </div>
+    </div>
+    <div class="container">
+        <query-result *ngIf="queryState?.results"
+            [resultInfo]="queryState.resultInfo"
+            [queryState]="queryState">
+        </query-result>
+    </div>
+        `,
+    //directives: [QuerySelectComponent, QueryResultTableComponent],
+    //providers: [QueryService, NormalizationService, HTTP_PROVIDERS]
+})
+    
+export class QueryAppComponent { 
+    public queryState: QueryState;
+    public queryStepList: string[];
+        
+    constructor(private _queryService: QueryService) {
+        this._queryService.setup();
+        this.queryStepList = [];
+        this.addQueryStep();
+    }
+    
+    addQueryStep() {
+        this.queryStepList.push('step');
+    }
+    
+    removeQueryStep() {
+        this.queryStepList.pop();
+        this._queryService.state.steps.pop();
+    }
+    
+    onQueryChanged(event: any) {
+        console.debug("app.onquerychanged! event=", event);
+        this._queryService.runQuery();
+        this.queryState = this._queryService.getState();
+    }
+}