--- a/app/query-select.component.ts	Wed Feb 03 15:04:02 2016 +0100
+++ b/app/query-select.component.ts	Wed Feb 03 16:18:46 2016 +0100
@@ -16,7 +16,7 @@
     <form (ngSubmit)="onSubmit()">
         <select (change)="onSelectMode($event)">
             <option></option>
-            <option *ngFor="#mode of queryModes" [value]="mode.id">
+            <option *ngFor="#mode of getQueryModes()" [value]="mode.id">
                 {{mode.label}}
             </option>
         </select>
@@ -62,8 +62,8 @@
     </form>
 </div>
         `,
-    inputs: ['queryStep', 'index']
-    //outputs: ['queryChanged'] // this should work but doesn't
+    inputs: ['queryStep', 'index'],
+    outputs: ['queryChanged']
 })
    
 export class QuerySelectComponent implements OnInit { 
@@ -77,7 +77,8 @@
     public queryInput: string;
     public queryInput2: string;
     
-    @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
+    // output queryChanged
+    public queryChanged: EventEmitter<QueryState> = new EventEmitter<QueryState>();
     
     constructor(private _queryService: QueryService, private _normService: NormalizationService) {}
     
@@ -87,13 +88,17 @@
     
     setup() {
         console.log("query-select setup step=", this.queryStep);
-        this.queryModes = this._queryService.getQueryModes();
         var step = this._queryService.state.steps[this.index-1];
         if (step != null) {
             this.resultInfo = step.resultInfo;
         }
     }
     
+    getQueryModes(): QueryMode[] {
+        this.queryModes = this._queryService.getQueryModes(this.index);
+        return this.queryModes;
+    }
+    
     onSelectMode(event: any) {
         var selected = event.target.value;
         this.selectedMode = this.queryModes.find(mode => mode.id === selected);