function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Akash v 6Akash v 6 

How to Convert Lightning component to Web component

Hi All,

I am trying to convert a lightning component to web component but not sure how to handle the below situation.
  
<aura:component>
    <aura:attribute name="BolAttribute" type="Boolean"/>
    <aura:attribute name="intAttribute" type="Integer"  default="0"/>
    <lightning:input type="Text" aura:id="inputId" name="input1" label="Enter a Name" />
    <lightning:input type="checkBox" aura:id="checkId" name="checkboxField" label="Yes" />

    <Lightning:button aura:id="button" onClick="{!c.setTrue}" />
</aura:component>

js code
  
({
    setTrue: function(component,event){
                     var checkCmp = component.find("checkId");
                      var isChecked = component.find('checkId').get('v.checked');
                        component.set("v.BolAttribute" ,isChecked);
                      var iVar = component.find("inputId").get("v.value")
                       
                     if(iVar =='Text' && iVar==true){
                             console.log('true');
                      }
     },

})

 
lnallurilnalluri
Hi Akash

Check if this works for you.

.html  
<template>
    <lightning-input aura-id="inputId" name="input1" label="Enter a Name" value={inputTextVal}></lightning-input>
    <lightning-input type="checkbox" aura-id="checkId" onclick={checkBoxHandle} value={bolAttribute} name="checkboxField" label="Yes" ></lightning-input>

    <Lightning-button aura-id="button" label="button" onclick={setTrue} ></Lightning-button>
</template>

.js
  
import { LightningElement,track } from 'lwc';

export default class Test extends LightningElement {
    @track bolAttribute;
    @track intAttribute=0;
    @track inputTextVal;
    setTrue(){
        
       if(typeof this.inputTextVal!='undefined'){
               console.log('inputTextVal has value'+this.inputTextVal);
        }
        this.bolAttribute=true;
        
    }
    checkBoxHandle(event){
        this.bolAttribute = event.target.value;
    }
}

​​​​​​​