title: How to create custom input component with ngModel working in angular 6?
body: <p>Since I use inputs with a lot of the same directives and .css classes applyed, I want to extract the repeated code to some component like this:</p>
  
  <pre><code>  @Component({
    selector: "app-input",
    template: `
      &lt;div class="..."&gt;
        &lt;input type="..." name="..." class="..." [(ngModel)]="value" someDirectives...&gt;
        &lt;label for="..."&gt;...&lt;/label&gt;
      &lt;/div&gt;
    `,
    ...
    })
    export class InputComponent implements OnInit {
      // some implementation connecting external ngModel with internal "value" one
    }
  </code></pre>
  
  <p>The problem here is creating a component in such a way that it can be used with ngModel as an ordinary input:</p>
  
  <pre><code>&lt;app-input [(ngModel)]="externalValue" ... &gt;&lt;/app-input&gt;
  </code></pre>
  
  <p>I've found several solutions on the internet that can be partially or completely outdated now like:
  <a href="https://stackoverflow.com/questions/34948961/angular-2-custom-form-input/34998780#34998780">Angular 2 custom form input</a>
  Can this be done in a better way in angular 6?</p>