--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/query-app.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -0,0 +1,34 @@
+import {Component} from 'angular2/core';
+import {HTTP_PROVIDERS} from 'angular2/http';
+
+import {QueryService} from './query.service';
+import {QueryState} from './query-state';
+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>
+        <query-result [queryState]="queryState"></query-result>
+        `,
+    directives: [QuerySelectComponent, QueryResultComponent],
+    providers: [QueryService, HTTP_PROVIDERS]
+})
+    
+export class QueryAppComponent { 
+    public title = 'huhu!';
+    public selectedQuery: string;
+    public queryState: QueryState;
+        
+    constructor(private _queryService: QueryService) {
+    }
+    
+    onQueryChanged(event: any) {
+        console.debug("app.onquerychanged! event=", event);
+        this._queryService.updateQuery();
+        this.queryState = this._queryService.getState();
+    }
+}