title: How can I create a custom input element in Stencil to work with Angular/Ionic?
body: <p>I have a massive headache trying to figure this out. I am wanting to create a custom input element I can use in my Angular/Ionic application. How can I use Angular attributes with these custom elements, like FormControlName for example.</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-custom-stencil-input type="text" formControlName="firstName"&gt;&lt;/my-custom-stencil-input&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have the following code below, but it is showing errors when I attempt to use FormControlName.</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-js lang-js prettyprint-override"><code>import { Component, h, Prop } from '@stencil/core';
  
  @Component({
    tag: 'ba-text-input-one',
    styleUrl: './text-input-1.component.css',
    scoped: true,
  })
  export class TextInputOne {
    @Prop({reflect: true}) type: string;
    @Prop({reflect: true}) placeholder: string;
    @Prop({reflect: true}) formControlName: string;
  
  
    render() {
      return (
        &lt;div id="cmp"&gt;
          &lt;div id="icon-area"&gt;
            &lt;slot name="icon"&gt;&lt;/slot&gt;
          &lt;/div&gt;
          &lt;input id="input-field" formControlName={this.formControlName} type={this.type} /&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The documentation on Stencil is not very thorough on how to approach this.</p>
  <p>Essentially, I am wanting to use my own custom Stencil input element in an Angular reactive form.</p>