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';

  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 (
        <input type={this.type}
          value={this.value} maxlength={this.maxlength}
          disabled={this.disabled} />


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!


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:

let bt = document.getElementById("lkbuton");


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


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: