File

libs/modification/src/lib/min-max-range/min-max-range.component.ts

Implements

OnChanges

Metadata

selector n52-min-max-range
styleUrls ./min-max-range.component.css
templateUrl ./min-max-range.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

range
Type : MinMaxRange

Outputs

onRangeChange
Type : EventEmitter<MinMaxRange>

Methods

Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public resetYaxisRange
resetYaxisRange()
Returns : void
Public setYaxisRange
setYaxisRange()
Returns : void

Properties

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

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""