How to pass parameter from LWC to Apex controller?

 In this blog post we will learn "How to pass parameter from LWC to apex controller?".

In the provided code, the communication between the Lightning web component (LWC) and the Apex controller is facilitated by the @wire decorator. The LWC has a public property accName annotated with @api, and this property is used as a parameter in the @wire decorator. The getAccountData method from the getAccountRecord Apex class is invoked with the value of accName as the parameter ({ accNameParamInApex: '$accName'}), establishing the communication link. When the value of accName changes, the Apex method is automatically re-invoked, ensuring that the parameter is passed from the LWC to the Apex controller.

wireaFunctionExample.html

<template>

    <div >

        <lightning-input type="text" label="Enter Account Name" value={accName} onchange={handleChange}> </lightning-input>

        <p>Displaying Account Information</p>

        <template if:true={accountRecord}>

            <template for:each={accountRecord} for:item="item" for:index="index">

                <p key={item.Id}>

                   Name: {item.Name}

                </p>

            </template>

        </template>

        <template if:true={error}>

            Some error occured.

        </template>

    </div>

 

</template>

wireaFunctionExample.js

import { LightningElement,wire,track,api } from 'lwc';

import getAccountData from '@salesforce/apex/getAccountRecord.getAccountRecordMethod';

 

export default class WireaFunctionExample extends LightningElement {

    @api accName;

    @track accountRecord;

    @track error;

    handleChange(event){

        const userInput = event.target.value;

        this.accName= userInput;

    }

 

    @wire(getAccountData,{ accNameParamInApex: '$accName'}) 

    accountsData({ error, data }) {

        if (data) {

            //console.log('RecordId is'+recordId);

            this.accountRecord = data;

            this.error = undefined;

        } else if (error) {

            //console.log('Error block');

            this.error = error;

            this.accountRecord = undefined;

        }

    }

}

wireaFunctionExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

getAccountRecord.cls

public with sharing class getAccountRecord {

  

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountRecordMethod(String accNameParamInApex) {

        String accNameKey = '%'+accNameParamInApex+'%';

    List<Account> accList=[SELECT Id, Name, Industry

        FROM Account

        Where name Like: accNameKey];

        return accList;

    }

}

testLWCCompApp.app

<aura:application>

<c:wireaFunctionExample></c:wireaFunctionExample>

</aura:application>       

OUTPUT: