Control Value Accessor

app.component.html

<button (click)="updateValue(+value - 1)">-</button>
<input [ngModel]="value"
       (ngModelChange)="updateValue($event)"
       type="string">
<button (click)="updateValue(+value + 1)">+</button>

app.component.ts

<app-quantity-input [(ngModel)]="quantity"></app-quantity-input>

<div>
  Quantity: {{ quantity }}
</div>

quantity-input.component.html

<button (click)="updateValue(+value - 1)">-</button>
<input [ngModel]="value"
       (ngModelChange)="updateValue($event)"
       type="string">
<button (click)="updateValue(+value + 1)">+</button>

quantity-input.component.ts

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-quantity-input',
  templateUrl: './quantity-input.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => QuantityInputComponent),
    multi: true,
  }],
})
export class QuantityInputComponent implements ControlValueAccessor {
  value: number;

  disabled = false;

  private valueChanges = new Subject<number>();

  private touches = new Subject();

  registerOnChange(fn: any) {
    console.log('registerOnChange',fn);
    this.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: any) {
    this.touches.subscribe(fn);
  }

  setDisabledState(isDisabled: boolean) {
    this.disabled = isDisabled;
  }

  writeValue(value: number) {
    this.value = value;
  }

  updateValue(value: number) {
    this.value = value;
    this.valueChanges.next(value);
  }

  touch() {
    this.touches.next();
  }
}

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjVkIHd4vf3AhWJfMAKHeM7C1oQFnoECAQQAQ&url=https%3A%2F%2Fstackblitz.com%2Fedit%2Fangular-cva&usg=AOvVaw0Taz1DZEMJQedkITmNZlcw