Lightning Web Component Combobox

Let us discuss here how to use the Lightning Web Component Combobox .lightning-combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input. In this example, we will be showing the list of the opportunities based on the selected stage name. Refer this link to environment setup 

1.Create an apex class 

create an Apex class that will be fetching the opportunities based on the selected stage name . it this class we have an Aura Enabled method that will accept the stage name and return the list of opportunities. Use this SFDX command to create an apex class

Here is the complete apex class

 

2. Create a Lightning Web Component 

Now create a lightning web component that will display the combobox which contains the opportunity stage names .based on the selected opportunity stage name this component will display the list of opportunities.

Use this SFDX command to create a lightning web component

Here is the ComboboxEx.html code

Here is the ComboboxEx.js JavaScript controller.

Here is the ComboboxEx.js-meta.xml configuration file

 

3. Push Changes and add the Component to record page 

Now push the changes using this SFDX command

Now add this web component to the opportunity record page using lightning app builder and you can able to see the result as shown below.

Now select the stage name from the combobox and it will display the list of opportunities as shown below.