Conditional Show/Hide of Lightning Input in Child from Parent
In this LWC scenario, We are going to work on conditional rendering on Lightning Input fields in child component from parent component using a picklist field.
This problem statement has been designed for developer who are beginners in Lightning Web Component.
Problem Statement
- Create a parent component which has a picklist field. The picklist will have three option:-
- Show Input 1
- Show Input 2
- Show Input 3
- Create a child component which has three input field with label:-
- Name
- Phone
- If users select Show Input 1, Only Name input in child component should be visible
- If Users select Show Input 2, Only Phone input in child component should be visible
- If Users select Show Input 3, Only Email input in child component should be visible
Do you need help?
Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.
GET IN TOUCH
Schedule a 1:1 Meeting with me
Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.
Hi Sanket,
Thanks for sharing We can achieve this requirement by using a dependent picklist why do we use lwc here is there any concern to use here
Thanks
Avinash
Please find the code below :
Parent HTML :
=================================================================
Parent JS :
=================================================================
import { LightningElement } from ‘lwc’;
export default class PracticeScenario3LWC extends LightningElement {
value=”;
get options(){
return [
{label : “Input 1”, value : “Input1”},
{label : “Input 2”, value : “Input2”},
{label : “Input 3”, value : “Input3”}
];
}
onchangehandler(event){
this.value = event.target.value;
}
}
Child HTML :
=================================================================
Child JS :
=================================================================
import { LightningElement,api } from ‘lwc’;
export default class PracticeScenario3LWCChild extends LightningElement {
@api selectedValue;
get showInput1(){
return this.selectedValue == ‘Input1’ ? true:false;
}
get showInput2(){
return this.selectedValue == ‘Input2’ ? true:false;
}
get showInput3(){
return this.selectedValue == ‘Input3’ ? true:false;
}
}