A Sample Component with a Value Accessible via FormControlName, FormControlDirective or NgModel Directives #blog

sample.component.ts

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

@Component({
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SampleComponent),
    multi: true,
  }],
  
  /* Rest is removed for brevity */
})
export class SampleComponent implements ControlValueAccessor {
  @Input()
  disabled: boolean;

  @Input()
  set value(value: string) {
    this._value = value;
    this.notifyValueChange();
  }

  get value(): string{
    return this._value;
  }

  onChange: (value: string) => {};

  onTouched: () => {};

  private _value: string;

  notifyValueChange(): void {
    if (this.onChange) {
      this.onChange(this.value);
    }
  }

  writeValue(value: string): void {
    this._value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

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