Abastract VALUE used to custom component for Forms (implementing ControlValueAccessor)

abstract-value-accessor.ts

// Code inspired by http://www.anasfirdousi.com/share-controlvalueaccessor-provider-creation-with-abstract-controlvalueaccessor-across-custom-form-enabled-angular-components.html
import { Component, Directive, Provider, forwardRef, Type } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

export abstract class AbstractValueAccessor<T> implements ControlValueAccessor {
    private _value: T = '';
    public get value(): T { return this._value; };
    public set value(v: T) {
      if (v !== this._value) {
        this._value = v;
        this.onChange(v);
      }
    }
    protected onChange = (_) => {};
    protected onTouched = () => {};
    
    // ControlValueAccessor implementation
    private writeValue(value: T) {
      console.log('wrrite value', value); 
      this._value = value;
       this.onChange(value);
    }

    private registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
    private registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}
  
export function MakeProvider(typeCustomCmpClass : any){
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => typeCustomCmpClass),
    multi: true
  };
}

/*
// USAGE in your CustomCmp extends AbstractValueAccessor<TYPE_OF_YOUR_VALUE> + use value in the template and bind/call onTouch/onChange
@Component({
  selector: 'custom-range',
  template:` 
    <div class="custom-range">
      {{ label }}
      <input type="range" min=0 max=500 [(ngModel)]="value" (input)="onChange($event.target.value)"   /> {{ value }}
    </div>
  `
  providers: [ MakeProvider(CustomRange) ]
})
export class CustomRange extends AbstractValueAccessor<number> {
   @Input() label: string;
} 
*/