Wrapper Class in Lightning web Component

Wrapper Class gives extra flexibility to Salesforce developers. We all have used it in Visualforce pages, Lightning Aura Component but what about wrapper class in Lightning Web? Does Lightning Web Component supports wrapper? If yes, How do we call an apex method which returns a wrapper object?

Answer to these questions are:- Yes, Lightning Web Component does supports Wrapper class to be used in apex methods.

Let’s see an example to call an apex method which returns List of wrapper object.

We will create an Apex class with Name wrapperController which has a wrapper class defined inside it. This wrapper class is being used inside a method with name getWrapperClassList(). This method returns List of wrapper defined inside the class with name wrapperClass. Also, the method is annotated with @AuraEnabled(cacheable=true).

public class wrapperController {
    @AuraEnabled(cacheable=true)
    public static List<wrapperClass> getWrapperClassList() {
        List<wrapperClass> wrapperList = new List<wrapperClass>();
        for(Account acc: [select id, name from Account limit 5]){
            wrapperClass wc = new wrapperClass();
            wc.accountName = acc.name;
            wc.accountId = acc.Id;
            wrapperList.add(wc);
        }
        
        return wrapperList;
    }
    
    public class wrapperClass{
        @AuraEnabled public String accountName;
        @AuraEnabled public String accountId;
    }
}

Let’s create a Lightning web component with name wrapperInLwc. Every lightning web component will have three files by default.

wrapperInLwc.html

The below html file has for:each directive which iterates over data received from the apex class. If the wrapper list returned from the class method has some values, they will appear on the UI.

<template>
    <lightning-card title="Wraaper Class in Lwc" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={wrapperList.data}>
                <template for:each={wrapperList.data} for:item="wrapper">
                    <p key={wrapper.accountId}>{wrapper.accountName}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

wrapperInLwc.js

You must import the apex class in order to use it’s method. We can make apex method call by two ways:- Using Wire services and wiring it with property or a function or directly making an imperative call.

In below case, we have used wire services to call the apex method and get the wrapper data from apex into Lightning Web Component. The method has been called and wired with property with name wrapperList.

import { LightningElement, wire } from 'lwc';
import getWrapperClassList from '@salesforce/apex/wrapperController.getWrapperClassList';

export default class WrapperInLwc extends LightningElement {
    @wire(getWrapperClassList) wrapperList;
}

wrapperInLwc.js-meta.xml

The js-meta.xml file is required to determine the metadata information of the component. The below code tells that the component can be used with record, home and record lightning page in Salesforce.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>