custom-input.component.ts

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

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
};

@Component({
  selector: 'custom-input',
  template:` 
    <div class="custom-input">
      {{ label }}
      <input type="text" (input)="onChange($event)"  />
    </div>
  `
  providers: [ {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
} ]
})
export class CustomInput implements ControlValueAccessor {
  
  _value = '';
  
  propagateChange:any = () => {};
  
  @Input() label: string;
  
  writeValue(value: any) {
    if( value ){
     this._value = value;  
    }
  }
  
  registerOnChange(fn) {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: () => void): void { }
  
  onChange(event){
    this.propagateChange(event.target.value);
  }

}