title: How to create custom form control using native element HTMLElement in angular 5 6 7
body: <p>it is practically the following
  I want the native HTML input tag to extend the native and typescript properties</p>
  
  <p>example: 
  from: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox"
         formControlName="aComponent"
         name="aComponent"
         [checked]="data.get('aComponent').value"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>to: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-input type="checkbox"
         formControlName="aComponent"
         name="aComponent"
         [checked]="data.get('aComponent').value"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-input type="checkbox"
         formControlName="aComponent"
         name="aComponent"
         [checked]="data.get('aComponent').value"&gt; &lt;/my-input&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>[checked] and formControlName is a property that provides angular, which also would like to inherit and native features such as: type and name</p>
  
  <p>I know it's a little crazy but I would like to know if it is possible</p>
  
  <p>in my component I try to do the following but, it only imports the native elements of HTML but not the features that Angular provides</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
  
  @Component({
      selector: 'my-input',
      templateUrl: './input.component.html',
      styleUrls: ['./input.component.css']
  })
  export class MyInputComponent extends HTMLElement implements OnInit {
  
      @Input() checked; // angular feature that does not work
  
      constructor() {
          super();
      }
  
      ngOnInit() {
      }
  
  }</code></pre>
  </div>
  </div>
  </p>