--- a/app/app.component.ts	Wed Jan 13 16:01:47 2016 +0100
+++ b/app/app.component.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -1,6 +1,7 @@
 import {Component} from 'angular2/core';
+import {HTTP_PROVIDERS} from 'angular2/http';
 
-import {QueryState} from './query-state';
+import {QueryService} from './query.service';
 import {QuerySelectComponent} from './query-select.component';
 import {QueryResultComponent} from './query-result.component';
 
@@ -10,16 +11,17 @@
         <h1>My Angular 2 Text: {{title}}</h1>
         <p>Selected option: {{selectedOption}}</p>
         <query-select [selectedOption]="selectedOption"></query-select>
-        <query-result [queryState]="queryState"></query-result>
+        <query-result></query-result>
         `,
-    directives: [QuerySelectComponent, QueryResultComponent]
+    directives: [QuerySelectComponent, QueryResultComponent],
+    providers: [QueryService, HTTP_PROVIDERS]
 })
     
 export class AppComponent { 
     public title = 'huhu!';
     public selectedOption = 'unknown';
-    
-    public queryState: QueryState;
-    
+        
+    constructor() {
+    }
     
 }

--- a/app/query-result.component.ts	Wed Jan 13 16:01:47 2016 +0100
+++ b/app/query-result.component.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -1,15 +1,20 @@
 import {Component, OnInit} from 'angular2/core';
 
+import {QueryState} from './query-state';
+
 @Component({
     selector: 'query-result',
     template: `
-        <p>Query result: {{queryState}}</p>
-        `
+        <div *ngIf="queryState">
+          <p>Query results ({{queryState.numResults}}):</p>
+        </div>
+        `,
+    inputs: ['queryState']
 })
    
 export class QueryResultComponent implements OnInit { 
     
-    public queryState;
+    public queryState: QueryState;
     
     ngOnInit() {
         this.setup();

--- a/app/query-select.component.ts	Wed Jan 13 16:01:47 2016 +0100
+++ b/app/query-select.component.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -1,8 +1,8 @@
 import {Component, OnInit} from 'angular2/core';
-import {HTTP_PROVIDERS} from 'angular2/http';
 
 import {QueryService} from './query.service';
 import {QueryMode} from './query-mode';
+import {QueryStep} from './query-step';
 
 
 @Component({
@@ -14,17 +14,17 @@
                 {{mode.label}}
             </option>
         </select>
-        <select [(ngModel)]="selectedQuery">
+        <select (change)="onSelectOption($event)">
             <option *ngFor="#option of query2Options" [value]="option">
                 {{option}}
             </option>
         </select>
-        `,
-    providers: [QueryService, HTTP_PROVIDERS]
+        `
 })
    
 export class QuerySelectComponent implements OnInit { 
     public queryModes;
+    public selectedMode;
     public selectedQuery = 'unknown';
     public query2Options;
     
@@ -35,14 +35,24 @@
     }
     
     setup() {
+        this._queryService.setupIsmiObjectTypes();
         this.queryModes = this._queryService.getQueryModes();
-        this._queryService.setupIsmiObjectTypes();
+        // select first mode
+        this.selectedMode = this.queryModes[0];
+        this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
     }
     
     onSelectMode(event: any) {
         var selected = event.target.value;
-        var mode = this.queryModes.find(mode => mode.id === selected);
-        this._queryService.getQueryOptions(mode).then(
-            options => this.query2Options = options);
+        this.selectedMode = this.queryModes.find(mode => mode.id === selected);
+        this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
+    }
+    
+    onSelectOption(event: any) {
+        var selected = event.target.value;
+        this.selectedQuery = selected;
+        console.debug("selected option:", selected);
+        var query = {'mode': this.selectedMode, 'objectType': selected};
+        this._queryService.queryState.queries.push(query);    
     }
 }

--- a/app/query-state.ts	Wed Jan 13 16:01:47 2016 +0100
+++ b/app/query-state.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -1,3 +1,5 @@
 export interface QueryState {
-        
+    queries: QueryStep[];
+    results: any[];
+    numResults: number;
 }
\ No newline at end of file

--- a/app/query.service.ts	Wed Jan 13 16:01:47 2016 +0100
+++ b/app/query.service.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -4,17 +4,23 @@
 import 'rxjs/Rx'; // import all RxJS operators
 
 import {QueryMode} from './query-mode';
+import {QueryState} from './query-state';
+import {QueryStep} from './query-step';
 
 @Injectable()
 export class QueryService {
         
+    public queryState: QueryState;
+    
     public ismiObjectTypes;
     
     public QUERY_MODES: QueryMode[] = [
         {id: 'type_is', label:'Object type is'},
         {id: 'att_contains', label: 'Attribute contains'}];
         
-    constructor(private _http: Http) {}
+    constructor(private _http: Http) {
+        this.queryState = {'queries': [], 'results': [], numResults: 0};
+    }
     
     getQueryModes(): QueryMode[] {
         return this.QUERY_MODES;
@@ -27,7 +33,8 @@
         } else if (queryMode.id === 'type_is') {
             options = this.ismiObjectTypes;
         }
-        return Promise.resolve(options);
+        console.debug("getQueryOptions returns: ", options);
+        return options;
     }
     
     setupIsmiObjectTypes() {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/query-step.ts	Wed Jan 13 18:57:31 2016 +0100
@@ -0,0 +1,4 @@
+export interface QueryStep {
+    mode: string;
+    objectType?: string;
+}
\ No newline at end of file