import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'; import { FormControl } from '@angular/forms'; import { rangeValidator } from 'src/app/shared/validator'; import { ConeSearch } from "../../../store/model"; @Component({ selector: 'app-radius', templateUrl: 'radius.component.html', styleUrls: ['radius.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class RadiusComponent { @Input() set coneSearch(coneSearch: ConeSearch) { if (coneSearch) { this.radiusField.setValue(coneSearch.radius); this.radiusRange.setValue(coneSearch.radius); this.radiusField.disable(); this.radiusRange.disable(); } else { this.radiusRange.setValue(0); this.radiusField.setValue(0); this.radiusField.enable(); this.radiusRange.enable(); } } @Output() changeRadius: EventEmitter<number> = new EventEmitter(); radiusRange = new FormControl(''); radiusField = new FormControl('', [rangeValidator(0, 150, '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); } } }