Using Wrapper Class in Lighting Web Components(lwc)

What is a Wrapper Class?
A Wrapper class is a class whose instances are a collection of other objects.
OR
A wrapper or container class is a class, a data structure, or an abstract data type which contains different objects or collection of objects as its members.

This post explains how to use wrapper class properties in Lighting Web Components
in this demo, I am displaying Account and related Contacts using Wrapper Class.

HTML Code

<template>
    <lightning-card title="Wrapper Class in Lightning Web Components">

        <template if:true={data}>
                <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered">
                    <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col">
                                <div title="Key">Account Name</div>
                            </th>
                            <th scope="col">
                                <div title="Value">Account Related Contacts</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={data} for:item="keyValue">
                            <tr key={keyValue.Id}>
                                <th scope="col">
                                    <div>{keyValue.objAcc.Name}</div>
                                </th>
                                <th scope="col">
                                    <template for:each={keyValue.lstCons} for:item="con">
                                        <div key={con.Id}>{con.Name}</div>
                                    </template>
                                </th>
                            </tr>
                        </template>
                    </tbody>
                </table>
        </template>
</template>

JS Code

import { LightningElement, wire } from 'lwc';
import AccAndCons from '@salesforce/apex/LWCExampleController.fetchAccAndCons';

export default class WrapperClassInLWC extends LightningElement {
    data;
    error;


    @wire(AccAndCons)
    accs({error, data}) {
        if(data) {
            this.data = data;
            window.console.log('data ==> '+JSON.stringify(data));
        }
        else if(error) {
            this.error = error;
        }
    }
}

Apex Class

public inherited sharing class LWCExampleController {

    @AuraEnabled(Cacheable = true)
    public static List<WrapperDemo> fetchAccAndCons() {
        List<WrapperDemo> lstWrapper = new List<WrapperDemo>();

        for(Account acIterator : [ SELECT Id, Name, (Select Id, Name From Contacts) FROM Account WHERE Id = '001B000000vZWOHIA4'] ) {
            lstWrapper.add(new WrapperDemo(acIterator, acIterator.Contacts));
        }

        return lstWrapper;
        
    }
 
 // Wrapper Class
 public class WrapperDemo {
        @AuraEnabled public Account objAcc;
        @AuraEnabled public list<Contact> lstCons;

        public WrapperDemo(Account acc, list<Contact> lstCons) {
            this.objAcc = acc;
            this.lstCons = lstCons;
        }
    }
}

Output