radio.component.ts

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

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

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

    radio = new FormControl('');

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

    getDefault(criterion: Criterion): void {
        if (!criterion) {
            this.radio.setValue('');
            this.radio.enable();
        } else {
            const c = criterion as RadioCriterion;
            this.radio.setValue(c.option.value);
            this.radio.disable();
        }
    }
}