import {Component, Input, Provider, forwardRef} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from "@angular/common"; const noop = () => { }; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => TaalComponent), multi: true }); @Component({ selector: 'taal', template: `{{clazz}}<ng-content></ng-content>`, directives: [CORE_DIRECTIVES], providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], }) export class TaalComponent implements ControlValueAccessor { @Input('my-class') clazz: string; constructor() { } //The internal data model private _value:any = ''; //Placeholders for the callbacks private _onTouchedCallback:(_:any) => void = noop; private _onChangeCallback:(_:any) => void = noop; //get accessor get value():any { return this._value; }; //set accessor including call the onchange callback set value(v:any) { if (v !== this._value) { this._value = v; this._onChangeCallback(v); } } //Set touched on blur onTouched() { this._onTouchedCallback(); } //From ControlValueAccessor interface writeValue(value:any) { this._value = value; } //From ControlValueAccessor interface registerOnChange(fn:any) { this._onChangeCallback = fn; } //From ControlValueAccessor interface registerOnTouched(fn:any) { this._onTouchedCallback = fn; } }