libs/modification/src/lib/min-max-range/min-max-range.component.ts
selector | n52-min-max-range |
styleUrls | ./min-max-range.component.css |
templateUrl | ./min-max-range.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
range | |
Type : MinMaxRange
|
|
onRangeChange | |
Type : EventEmitter<MinMaxRange>
|
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
Public resetYaxisRange |
resetYaxisRange()
|
Returns :
void
|
Public setYaxisRange |
setYaxisRange()
|
Returns :
void
|
Public rangeMax |
Type : number
|
Public rangeMin |
Type : number
|
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { MinMaxRange } from '@helgoland/core';
@Component({
selector: 'n52-min-max-range',
templateUrl: './min-max-range.component.html',
styleUrls: ['./min-max-range.component.css']
})
export class MinMaxRangeComponent implements OnChanges {
public rangeMin: number;
public rangeMax: number;
@Input()
public range: MinMaxRange;
@Output()
public onRangeChange: EventEmitter<MinMaxRange> = new EventEmitter();
public ngOnChanges(changes: SimpleChanges) {
if (changes.range && this.range) {
this.rangeMin = this.range.min;
this.rangeMax = this.range.max;
}
}
public setYaxisRange() {
const min = (this.rangeMin === null || this.rangeMin === undefined) ? 0 : this.rangeMin;
const max = (this.rangeMax === null || this.rangeMax === undefined) ? 0 : this.rangeMax;
this.onRangeChange.emit({ min, max });
}
public resetYaxisRange() {
this.rangeMin = null;
this.rangeMax = null;
this.onRangeChange.emit();
}
}
<input type="number" [(ngModel)]="rangeMin" (ngModelChange)="setYaxisRange()">
<input type="number" [(ngModel)]="rangeMax" (ngModelChange)="setYaxisRange()">
<button (click)="resetYaxisRange()">reset</button>
./min-max-range.component.css