import {Component} from 'angular2/core';

@Component({
    selector: 'query-select',
    template: `
        <p>Selected option: {{selectedQuery}}</p>
        <select (change)="onSelectType($event)">
            <option *ngFor="#option of queryTypes" [value]="option">
                {{option}}
            </option>
        </select>
        <select [(ngModel)]="selectedQuery">
            <option *ngFor="#option of query2Types" [value]="option">
                {{option}}
            </option>
        </select>
        `
})
export class QuerySelectComponent { 
    public queryTypes = ['Object type is', 'Attribute contains'];
    public selectedQuery = 'unknown';
    public query2Types = ['a', 'b', 'c'];
    
    onSelectType(event: any) {
        var selected = event.target.value
        this.selectedQuery = selected;
        if (selected == 'Attribute contains') {
            this.query2Types = ['d', 'e', 'f'];
        }
    }
}