Sign Up ›

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

Convert Lightning component to Web component

Hi All,

I am trying to convert lightning component to web component but not sure how to handle below situation.

Input.Cmp
  
<aura:component>
    <aura:attribute name="BolAttribute" type="Boolean"/>
    <aura:attribute name="intAttribute" type="Integer"  default="0"/>
<lightning:input type="Text" name="input1" label="Enter a Name" />

    <Lightning:button aura:id="button" onClick="{!c.setTrue}" />
</aura:component>
Input.js 
({
    setTrue: function(c,e,h){
        c.set("v.BolAttribute", true);
                      var in = component.find("button").get("v.value")
if(in=='Text'){
console.log('true');
}
    },

})




 
 
Best Answer chosen by Akash v 6
Ravindra Kashyap 7Ravindra Kashyap 7
Hi Akash, please this code.
  
<template>
     <lightning-button  label="Search" 
                        variant="brand" 
                        title="Neutral action" 
                        class="slds-m-left_x-small"
                        value="Text"
                        onclick={handleSearchClick}>
        </lightning-button>

    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}>
                            </lightning-checkbox-group>
</template>

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

export default class App extends LightningElement {
    @track BolAttribute;
    @track value = ['checked'];
    inVal;
    get options() {
        return [
            { label: 'Yes', value: 'true' }
        ];
    }

    handleSearchClick(evt) {
    this.BolAttribute = true;
    this.inVal = evt.target.value;
    if(this.inVal=='Text' && this.value == 'true'){
        console.log(this.inVal);
    }
    
    }
    handleChange(e) {
        this.value = e.detail.value;
        console.log(this.value);
    }
}

​​​​​​​

All Answers

Ravindra Kashyap 7Ravindra Kashyap 7
Hello Akash,

Please try below LWC code, which is equivalent to above mentioned Lightning Component Code.

App.html 
<template>
     <lightning-button  label="Search" 
                        variant="brand" 
                        title="Neutral action" 
                        class="slds-m-left_x-small"
                        value="Text"
                        onclick={handleSearchClick}>
        </lightning-button>
</template>

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

export default class App extends LightningElement {
    @track BolAttribute;
    handleSearchClick(evt) {
    this.BolAttribute = true;
    inVal = evt.target.value;
    if(inVal=='Text'){
        console.log(inVal);
    }
    
    }
}

Hope it will help you 😊

Ravindra Nath

 
Akash v 6Akash v 6
Hi Ravindra,

Thanks for your response. I missed to add the checkbox field and some modification in JS Controller..

  
<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>
  
({
    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');
                      }
     },

})

Thanks in Advance
Ravindra Kashyap 7Ravindra Kashyap 7
Hi Akash, please this code.
  
<template>
     <lightning-button  label="Search" 
                        variant="brand" 
                        title="Neutral action" 
                        class="slds-m-left_x-small"
                        value="Text"
                        onclick={handleSearchClick}>
        </lightning-button>

    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}>
                            </lightning-checkbox-group>
</template>

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

export default class App extends LightningElement {
    @track BolAttribute;
    @track value = ['checked'];
    inVal;
    get options() {
        return [
            { label: 'Yes', value: 'true' }
        ];
    }

    handleSearchClick(evt) {
    this.BolAttribute = true;
    this.inVal = evt.target.value;
    if(this.inVal=='Text' && this.value == 'true'){
        console.log(this.inVal);
    }
    
    }
    handleChange(e) {
        this.value = e.detail.value;
        console.log(this.value);
    }
}

​​​​​​​
This was selected as the best answer