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?".

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: