Implementing the ControlValueAccessor Interface for Custom Form Controls

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@Component({
  selector: 'app-counter-input',
  standalone: true,
  template: `<button (click)="increment()">+1 (Value: {{ value }})</button>`,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CounterInputComponent),
    multi: true
  }]
})
export class CounterInputComponent implements ControlValueAccessor {
  value = 0;
  private onChange = (val: number) => {};
  private onTouched = () => {};
 
  writeValue(val: number): void { this.value = val ?? 0; }
  registerOnChange(fn: (val: number) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 
  increment(): void {
    this.value++;
    this.onChange(this.value);
    this.onTouched();
  }
}