Nowy komponent input i nie zawsze działający value

Witam.

Czy może mi ktoś wyjaśnić, dlaczego za pierwszym razem gdy wpisuję w input wartość poza limitem to wartość ta zostaje poprawiona na max, czyli 1000. Jednak gdy tą wartość zmodyfikuję na inną większą liczbę to wartość niestety nie ulega ponownej zmianie w polu input value. Wartość przekazana przez emit jest poprawna i wynosi 1000.

number-input.component.ts

import {Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'ngx-number-input',
  templateUrl: './number-input.component.html',
  styleUrls: ['./number-input.component.scss'],
})
export class NumberInputComponent implements OnInit {
  @Input()
  public counter: number = 0;

  @Input()
  public step: number = 1;

  @Input()
  public readonly: boolean = false;

  @Output()
  counterChange: EventEmitter<number> = new EventEmitter<number>();

  @Input()
  public max: number = 1000;

  @Input()
  public min: number = 1;

  constructor() {
  }

  ngOnInit(): void {
  }

  increment() {
    const value = this.counter + this.step;
    this.setCounter(value);
  }

  decrement() {
    const value = this.counter - this.step;
    this.setCounter(value);
  }

  onChangeEvent(event: any) {
    const value = parseInt(event.target.value, null);
    this.setCounter(value);
  }

  setCounter(value: number) {

    let correct: boolean = true;
    if (value > this.max) {
      this.counter = this.max;
      correct = false;
    }

    if (value < this.min) {
      this.counter = this.min;
      correct = false;
    }

    if (correct) {
      this.counter = value;
    }

    this.counterChange.emit(this.counter);
  }

}

number-input.component.html

<div>
  <button (click)="decrement()">-</button>
  <input [value]="counter" type="text" (change)="onChangeEvent($event)">
  <button (click)="increment()">+</button>
</div>

Wywołanie

        <ngx-number-input [(counter)]="object.test1"></ngx-number-input>
        {{object.test1}}

Nie bindowałem nigdy [value] w inpucie, ale wnioskuję że będzie tutaj sytuacja taka, jakbyś bindował jakikolwiek inny property w jakim kolwiek innym komponencie.

Jak bindujesz jednokierunkowo (tak jak w tym momencie bindujesz do [value]), to w chwili gdy w parencie (w twoim przypadku ngx-input) zostanie zmieniona wartość, w childzie nie zostanie ona spropagowana (w input). Gdybyś taka sytuacja zaistniała w "Twoim" komponencie, mógłbyś to łapać w ngOnChanges. W przypadku jednak, gdy nie masz do niego dostępu, nie powinieneś bindować do [value] i nasłuchiwać na (change) tylko bindować do [ngModel] i nasłuchiwać na (ngModelChange) - cała logika związana z bindowaniem [ngModel] trochę inaczej wygląda.

Albo musiałbyś skorzystać z ControlValueAccessor albo bawić się ViewChild i ręcznie zmieniać wartość wyświetlaną w inpucie. Jeżeli dobrze zrozumiałem o co Ci chodzi, to tutaj masz poprawione: https://stackblitz.com/edit/angular-ivy-c2efqv?file=src%2Fapp%2Fnumber-input%2Fnumber-input.component.html tylko sobie na odpowiednie eventy pozmieniaj (blur, input itd).

Jako, że nikt nie wyjaśnił gdzie leży problem to pozwól, że trochę pomogę.

https://stackblitz.com/edit/angular-ivy-tdsmvz?file=src/app/number-input/number-input.component.ts

Przyjrzyj się wpisom w konsoli. Wydaje mi się, że wtedy zrozumiesz dlaczego Twoja wersja nie działa.

Pozdrówki :)