title: How to use Angular 9 and NG_VALUE_ACCESSOR?
body: <p>I'm trying to create a custom input element but for what reason ever it wont work and doesn't show anything. The question now is: why and what I'm doing wrong?</p>
  <p>This is my code:</p>
  <pre class="lang-js prettyprint-override"><code>    import { Component, forwardRef } from '@angular/core';
      import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
      
      @Component({
        selector: 'custom-input',
        template: '&lt;input [(ngModel)]=&quot;value&quot;/&gt;local: {{val}}',
        providers: [
          {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() =&gt; CustomInputComponent),
            multi: true
          }
        ]
      })
      export class CustomInputComponent implements ControlValueAccessor {
      
        constructor() { }
      
        onChange: any = () =&gt; {}
        onTouch: any = () =&gt; {}
        val= &quot;&quot;
      
        set value(val){
          if( val !== undefined &amp;&amp; this.val !== val){
          this.val = val
          this.onChange(val)
          this.onTouch(val)
          }
         
        }
      
        writeValue(value: any){
          this.value = value
        }
      
        registerOnChange(fn: any){
          this.onChange = fn
        }
      
        registerOnTouched(fn: any){
          this.onTouch = fn
        }
      
      }
  </code></pre>
  <p>The HTML looks like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;custom-input [(ngModel)]=&quot;running&quot; name=&quot;externalVal&quot; ngDefaultControl&gt; &lt;/custom-input&gt;
  </code></pre>
  <p>I'm using <code>ngDefaultControl</code> because I want use it outside of a form. The problem is now, that the compilation works fine but nothing is shown. Is there any mistake or error in the code?</p>