All files / app/components/number-input number-input.component.ts

92.68% Statements 38/41
88.88% Branches 8/9
75% Functions 3/4
92.68% Lines 38/41

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 421x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 21x 21x 21x 21x 21x 21x 8x 8x 8x 8x 21x 21x       21x 21x 8x 6x 5x 5x 5x 5x 21x 21x  
import {Component, EventEmitter, Input, Output} from "@angular/core";
 
@Component({
  selector: 'app-number-input',
  standalone: true,
 
  template: `
      <button (click)="onIncrease($event,-1)">-</button>
      <input
              type="text" inputmode="numeric" pattern="[0-9]*"
              [value]="value"
              (input)="onInput($event)">
      <button (click)="onIncrease($event, 1)">+</button>
  `
})
export class NumberInputComponent {
  @Input() labelText: string = '';
  @Input() value: number = 0;
 
  @Output() valueChange = new EventEmitter<number>();
 
  onInput(event: Event){
    const input: HTMLInputElement = event.target as HTMLInputElement;
    this.updateAndEmitValue(Number(input.value));
    input.value = '' + this.value;
  }
 
  onIncrease(event: Event, increase:number) {
    event.preventDefault();
    this.updateAndEmitValue(this.value + increase);
  }
 
  updateAndEmitValue(newValue:number) {
    if (isNaN(newValue)) return;
    if (newValue < 0) return;
    if (newValue == this.value) return;
    this.value = newValue;
    this.valueChange.emit(this.value);
  }
 
}