select.component.ts

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';

import { Criterion, SelectCriterion } from '../../store/model';
import { Option } from '../../../metamodel/model';

@Component({
    selector: 'app-select',
    templateUrl: 'select.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectComponent {
    @Input() id: number;
    @Input() label: string;
    @Input() options: Option[];
    @Input()
    set criterion(criterion: Criterion) {
        this.getDefault(criterion);
    }
    @Output() add: EventEmitter<SelectCriterion> = new EventEmitter();

    se = new FormControl();

    addCriterion() {
        const option = this.options.find(o => o.id === this.se.value);
        const se = new SelectCriterion(this.id, option);
        this.add.emit(se);
    }

    getDefault(criterion: Criterion): void {
        if (!criterion) {
            this.se.reset();
            this.se.enable();
        } else {
            const c = criterion as SelectCriterion;
            this.se.setValue(c.option.id);
            this.se.disable();
        }
    }
}