--- a/app/query-app.component.ts	Fri Jan 15 20:00:47 2016 +0100
+++ b/app/query-app.component.ts	Mon Jan 18 09:52:46 2016 +0100
@@ -3,15 +3,23 @@
 
 import {QueryService} from './query.service';
 import {QueryState} from './query-state';
+import {QueryStep} from './query-step';
+
 import {QuerySelectComponent} from './query-select.component';
 import {QueryResultComponent} from './query-result.component';
 
 @Component({
     selector: 'query-app',
     template: `
-        <h1>My Angular 2 Text: {{title}}</h1>
-        <p>Selected query: {{selectedQuery}}</p>
-        <query-select (queryChanged)="onQueryChanged($event)"></query-select>
+        <h1>Angular2 query builder</h1>
+        <div>Select a query step:</div>
+        <query-select *ngFor="#step of querySteps; #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>
         <query-result [queryState]="queryState"></query-result>
         `,
     directives: [QuerySelectComponent, QueryResultComponent],
@@ -19,11 +27,23 @@
 })
     
 export class QueryAppComponent { 
-    public title = 'huhu!';
-    public selectedQuery: string;
     public queryState: QueryState;
+    public querySteps: QueryStep[];
         
     constructor(private _queryService: QueryService) {
+        this._queryService.setup();
+        this.querySteps = [];
+        this.addQueryStep();
+    }
+    
+    addQueryStep() {
+        this.querySteps.push({'mode': null});
+        //this.queryState = this._queryService.getState();
+    }
+    
+    removeQueryStep() {
+        this._queryService.state.steps.pop();
+        //this.queryState = this._queryService.getState();
     }
     
     onQueryChanged(event: any) {