--- a/app/query-select.component.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query-select.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -1,8 +1,9 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, Output, EventEmitter, OnInit} from 'angular2/core';
 
 import {QueryService} from './query.service';
 import {QueryMode} from './query-mode';
 import {QueryStep} from './query-step';
+import {QueryState} from './query-state';
 
 
 @Component({
@@ -10,6 +11,7 @@
     template: `
         <p>Selected option: {{selectedQuery}}</p>
         <select (change)="onSelectMode($event)">
+            <option></option>
             <option *ngFor="#mode of queryModes" [value]="mode.id">
                 {{mode.label}}
             </option>
@@ -20,6 +22,7 @@
             </option>
         </select>
         `
+    //outputs: ['queryChanged']
 })
    
 export class QuerySelectComponent implements OnInit { 
@@ -28,6 +31,8 @@
     public selectedQuery = 'unknown';
     public query2Options;
     
+    @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
+    
     constructor(private _queryService: QueryService) {}
     
     ngOnInit() {
@@ -37,7 +42,7 @@
     setup() {
         this._queryService.setupIsmiObjectTypes();
         this.queryModes = this._queryService.getQueryModes();
-        // select first mode
+        // select first mode (too early?)
         this.selectedMode = this.queryModes[0];
         this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
     }
@@ -52,7 +57,8 @@
         var selected = event.target.value;
         this.selectedQuery = selected;
         console.debug("selected option:", selected);
-        var query = {'mode': this.selectedMode, 'objectType': selected};
-        this._queryService.setQueryStep(0, query);    
+        var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected};
+        this._queryService.setQueryStep(0, query);
+        this.queryChanged.emit(this._queryService.getState());
     }
 }