Apex Wire Method to Property

Now, we will see how we can get the Salesforce Record details using Apex Class – Wiring to Property mechanism.

To do this exercise, we will try to show a Contact Record in Lightning App.

Step 1: We have created an Apex Class named “LWC_ContactController” by which we will send the Contact record to Lightning Web Component.


public with sharing class LWC_ContactController{
       @AuraEnabled(cacheable = true)
       public static List<Contact> getContactList(){
           return [SELECT Id, Name, Email FROM Contact LIMIT 1];

getContactList() method of the Apex Class “LWC_ContactController” returns the Contact Record.

Step 2: After that, we have built a LWC named “showContactsWMP“. As per previous examples, we need to update the “showContactsWMP.js-meta.xml” file to set the visibility in Lightning App Builder.


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showContactsWMP">

Step 3: Need to write the respective HTML file.


    <lightning-card title="Apex Wire Method To Property">        
          <lightning-layout-item flexibility="auto" padding="around-small">
                <template if:true={contacts.data}>                        
                    <template for:each={contacts.data} for:item="contact">                        
                        <p key={contact.Id}>                               
                            <lightning-formatted-email value={contact.Email} class="slds-m-left_medium"></lightning-formatted-email>

Step 4: Now, we need to work on the JS file.


import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/LWC_ContactController.getContactList';

export default class ShowContactsWMP extends LightningElement {
    @wire(getContactList) contacts;

As per the wire method writing rules, first we have imported “getContactList” from the Apex Class, “LWC_ContactController“. Then, property contacts is wired to getContactList in this way

@wire(getContactList) contacts;

Remember, contacts is the property of wiring, that means we can get the data of contact using {contacts.data} & also we can get the error using {contacts.error} in html file and contacts is also the reactive property.

We have used wire mechanism so, the cacheable of the respective method, getContactList() of the Apex Class “LWC_ContactController” should be true.

Step 5: At last, need to add this LWC into Lightning App/Home or Record Page.


7,611 total views, 3 views today

Rating: 5.0/5. From 4 votes.
Please wait...
This entry was posted in Lightning Components. Bookmark the permalink.

Leave a Reply