Base class to create Angular components

simple-control-value-acessor.ts

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

/**
 * Function to create the basic provider to components which use `ngModel` as required by Angular.
 * @param type component type which extends `SimpleControlValueAcessor`
 */
export function createProviders(type: Type<SimpleControlValueAcessor>) {
  return [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => type), multi: true }
  ];
}

/**
 * Base class to create components that use `ngModel` and just need a simple getter/setter.
 * In case where a more complex getter/setter is required, just create one in the component and call
 * this one.
 */
export class SimpleControlValueAcessor implements ControlValueAccessor {
  private _value: string;
  private onChange: any = (_: any) => { };
  private onTouched: any = () => { };

  public get value() {
    return this._value;
  }

  public set value(val: string) {
    if (this._value === val) return;
    this._value = val;
    this.onChange(val);
    this.onTouched();
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

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