How do you build a custom form control by implementing the ControlValueAccessor interface?

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

const STAR_PROVIDER: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => StarRatingComponent),
  multi: true
};

@Component({
  selector: 'app-star-rating',
  standalone: true,
  providers: [STAR_PROVIDER],
  template: '<div class="stars">' +
    '  @for (star of [1, 2, 3, 4, 5]; track star) {' +
    '    <span (click)="rate(star)">{{ rating >= star ? \'★\' : \'☆\' }}</span>' +
    '  }' +
    '</div>'
})
export class StarRatingComponent implements ControlValueAccessor {
  rating = 0;
  onChange = (val: number) => {};
  onTouched = () => {};
  disabled = false;

  writeValue(value: number): void {
    this.rating = value || 0;
  }

  registerOnChange(fn: any): void { this.onChange = fn; }
  registerOnTouched(fn: any): void { this.onTouched = fn; }
  setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }

  rate(val: number) {
    if (!this.disabled) {
      this.rating = val;
      this.onChange(val);
      this.onTouched();
    }
  }
}