1 votes

add attribute to input component with stencil.js

I'm building web components with stencil.js and I'm working at the moment with creating an input for forms, the issue is that I have to add the formControlName = "" attribute to it, to be able to export it to a project with Angular. The issue is that I cannot pass this attribute to the component that I generate:

 import { Component, Host, h, Prop, State } from '@stencil/core';

@Component({
  tag: 'input-text',
  styleUrl: 'inputext.css',
  shadow: true
})
export class Inputext {
  @Prop({ reflectToAttr: true })
  disabled: boolean;
  @Prop() value: string;
  @Prop() maxlength: number;
  @Prop() minlength: number;
  @Prop() title: string;
  @Prop() placeholder: string;
  @Prop() type: string;
  @Prop() formcontrolname: string;
  @State() formControlName: string;

  render() {
    return (
      <Host>
        <label>{this.title}</label>
        <input type={this.type}
          placeholder={this.placeholder}
          formControlName={this.formcontrolname}
          value={this.value} maxlength={this.maxlength}
          minlength={this.minlength}
          disabled={this.disabled} />
      </Host>
    );
  }

}

and this is the component in the html:

 <input-text type="text" title="First Input" formControlName="numerosPrimos" placeholder="Holo" maxlength="12"></input-text>

Stay tuned to your comments!

0voto

Bryan Key Points 1

Friend, the best thing is that you put an id to your generated element and by means of Javascript with the method setAttribute () you put the attribute to it. Example:

 <ion-label>Principal</ion-label>
let bt = document.getElementById("lkbuton");

bt.setAttribute("[routerLink]","['/']");
console.log(bt);

result = <ion-label [routerLink]="['/']" >Principal</ion-label>

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X