time.component.ts

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

import { Criterion, TimeCriterion } from '../../store/model';

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

    time: Date = null;
    isTimeDisabled: boolean;
    isValidTime: boolean = false;

    addCriterion() {
        const fd = new TimeCriterion(this.id, this.time);
        this.add.emit(fd);
    }

    getDefault(criterion: Criterion): void {
        if (!criterion) {
            this.time = null;
            this.isTimeDisabled = false;
            this.isValidTime = false;
        } else {
            const c = criterion as TimeCriterion;
            this.time = c.value;
            this.isTimeDisabled = true;
            this.isValidTime = true;
        }
    }

    change(): void {
        if (!this.time) {
            this.isValidTime = false;
        } else {
            this.isValidTime = true;
        }
    }
}