Отправка данных, введенных на входе, в родительский компонент

Question

После включения нового дочернего компонента я должен контролировать введенные данные для отправки родительскому компоненту.

Данные должны быть созданы путем записи на вход.

<span flex>
  <button
    mat-icon-button
    (click)="decrease($event)"
    [disabled]="decreaseButtonDisabled"
  >
    <mat-icon>remove_circle_outline</mat-icon>
  </button>
  <mat-form-field flex>
    <input
      matInput
      #inputNumberPickerControl
      (click)="onNumberControl()"
      name="numberPickerInputField"
      [value]="numberPickerValue"
      style="text-align:center;"
      [disabled]="disabled"
    />
  </mat-form-field>
  <button
    mat-icon-button
    (click)="increase($event)"
    [disabled]="increaseButtonDisabled"
  >
    <mat-icon>add_circle_outline</mat-icon>
  </button>
</span>

I реализовать выдачу пользовательских событий с @Output в дочернем компоненте. С @ViewChild я пытаюсь получить то, что я пишу на входе , но он получил данные только после того, как нажал на свой собственный ввод

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

@ViewChild('inputNumberPickerControl', { static: false }) inputElementRef: ElementRef;


constructor() {
    this.numberPickerValue = 0;
}

onNumberControl() {
  const valueInput = parseInt(this.inputElementRef.nativeElement.value);

  if (valueInput as number) {
    this.numberPickerValue = valueInput;
    if (this.numberPickerValue < this.max && this.numberPickerValue > this.min) {
      this.onChange.emit(this.numberPickerValue);
    }
  }
}

Я получаю событие в родительском компоненте.

<ngx-mat-numberpicker
  [min]="1"
  [max]="100"
  [default]="valueNumberPicker"
  [starttext]="'min: 1'"
  [endtext]="'max: 100'"
  [disabled]="false"
  formControlName="unidades"
  (onChange)="unidadesDataChange($event)"
>