radius.component.ts

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

import { rangeValidator } from 'src/app/shared/validator';

@Component({
    selector: 'app-radius',
    templateUrl: 'radius.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class RadiusComponent {
    @Input()
    set radius(radius: number) {
        this.getDefault(radius);
    }
    @Input()
    set enabled(enabled: boolean) {
        if (enabled) {
            this.radiusField.enable();
            this.radiusRange.enable();
        } else {
            this.radiusField.disable();
            this.radiusRange.disable();
        }
    }
    @Output() changeRadius: EventEmitter<number> = new EventEmitter();

    radiusRange = new FormControl('');
    radiusField = new FormControl('', [rangeValidator(0, 150)]);

    getDefault(radius: number): void {
        if (!radius) {
            this.radiusRange.setValue(0);
            this.radiusField.setValue(0);
        } else {
            this.radiusRange.setValue(radius);
            this.radiusField.setValue(radius);
        }
    }

    radiusChange(value: string): void {
        this.radiusField.setValue(+value);
        this.radiusRange.setValue(+value);
        if (this.radiusField.valid) {
            this.changeRadius.emit(+value);
        } else {
            this.changeRadius.emit(null);
        }
    }
}