--- 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) {

--- a/app/query-select.component.ts	Fri Jan 15 20:00:47 2016 +0100
+++ b/app/query-select.component.ts	Mon Jan 18 09:52:46 2016 +0100
@@ -9,27 +9,31 @@
 @Component({
     selector: 'query-select',
     template: `
-        <p>Selected option: {{selectedQuery}}</p>
+        <div>
         <select (change)="onSelectMode($event)">
             <option></option>
             <option *ngFor="#mode of queryModes" [value]="mode.id">
                 {{mode.label}}
             </option>
         </select>
-        <select (change)="onSelectOption($event)">
+        <select *ngIf="query2Options" (change)="onSelectOption($event)">
+            <option></option>
             <option *ngFor="#option of query2Options" [value]="option">
                 {{option}}
             </option>
         </select>
-        `
-    //outputs: ['queryChanged']
+        </div>
+        `,
+    inputs: ['index']
+    //outputs: ['queryChanged'] // this should work but doesn't
 })
    
 export class QuerySelectComponent implements OnInit { 
-    public queryModes;
-    public selectedMode;
-    public selectedQuery = 'unknown';
-    public query2Options;
+    public queryStep: QueryStep;
+    public index: number;
+    public queryModes: QueryMode[];
+    public selectedMode: QueryMode;
+    public query2Options: string[];
     
     @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
     
@@ -40,7 +44,7 @@
     }
     
     setup() {
-        this._queryService.setupIsmiObjectTypes();
+        console.log("query-select setup step=", this.queryStep);
         this.queryModes = this._queryService.getQueryModes();
         // select first mode (too early?)
         this.selectedMode = this.queryModes[0];
@@ -55,10 +59,9 @@
     
     onSelectOption(event: any) {
         var selected = event.target.value;
-        this.selectedQuery = selected;
         console.debug("selected option:", selected);
-        var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected};
-        this._queryService.setQueryStep(0, query);
+        var step = {'mode': this.selectedMode, 'objectType': selected};
+        this._queryService.setQueryStep(this.index, step);
         this.queryChanged.emit(this._queryService.getState());
     }
 }

--- a/app/query.service.ts	Fri Jan 15 20:00:47 2016 +0100
+++ b/app/query.service.ts	Mon Jan 18 09:52:46 2016 +0100
@@ -10,9 +10,9 @@
 @Injectable()
 export class QueryService {
         
+    public neo4jBaseUrl = 'http://localhost:7474/db/data/cypher/';
     public state: QueryState;
-    
-    public ismiObjectTypes;
+    public ismiObjectTypes: any;
     
     public QUERY_MODES: QueryMode[] = [
         {id: 'type_is', label:'Object type is'},
@@ -29,6 +29,10 @@
         };
     }
     
+    setup() {
+        this.setupIsmiObjectTypes();
+    }
+    
     getState() {
         return this.state;
     }
@@ -73,12 +77,13 @@
     createCypherQuery() {
         var cypher = '';
         var returnType = '';
-        var step = this.state.steps[0];
-        if (step.mode.id === 'type_is') {
-            cypher = `MATCH (e:${step.objectType}) return e`;
-            returnType = 'node';
+        for (var i=0; i < this.state.steps.length; ++i) {
+            var step = this.state.steps[i];
+            if (step.mode.id === 'type_is') {
+                cypher = `MATCH (e:${step.objectType}) return e`;
+                returnType = 'node';
+            }
         }
-        
         this.state.cypherQuery = cypher;
         this.state.resultTypes = returnType;
     }
@@ -109,7 +114,7 @@
         // create POST data from query
         var data = JSON.stringify({'query': query, 'params': params});
         // make post request asynchronously
-        var resp = this._http.post('http://localhost:7474/db/data/cypher/', data, opts)
+        var resp = this._http.post(this.neo4jBaseUrl, data, opts)
         // filter result as JSON
         .map(res => res.json());
         // return Observable