public class wrapperClassDemo {
     @AuraEnabled(cacheable=true)
    public static List<AccountrelContact> getAllAccountWithContacts(){
        List<AccountrelContact> accWrapperList = new List<AccountrelContact>();
        List<Account> accList = [SELECT Id, Name, BillingState, Website, Phone,
                                    (SELECT Id, FirstName, LastName, Name, Email From Contacts)
                                    FROM Account Where Name like '%United%'];
        if(!accList.isEmpty()){
            for(Account acc : accList){
                AccountrelContact accWrapper = new AccountrelContact();
                accWrapper.accRecord = acc;
                accWrapper.contactList = acc.Contacts;
                accWrapper.contactCount = acc.Contacts.size();
                accWrapperList.add(accWrapper);
            }
        }
        return accWrapperList;
    }
    public class AccountrelContact{
        @AuraEnabled
        public Account accRecord{get;set;}
        @AuraEnabled
        public List<Contact> contactList{get;set;}
        @AuraEnabled
        public Integer contactCount{get;set;}
    }
}




HTML

<template>
    <lightning-card title="Data From Wrapper Class" icon-name="custom:custom11">
      <div class='specific'>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
              <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Parent Account">Contacts Related With Account</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Parent Account">Contacts Count</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <template for:each={data} for:item="keyValue">
                <tr key={keyValue.accRecord.Id}>
                    <th scope="col">
                        <div>{keyValue.accRecord.Name}</div>
                    </th>
                    <th scope="col">
                    <template for:each={keyValue.contactList} for:item="con">
                        <div key={con.Id}>{con.Name} &nbsp;&nbsp;&nbsp; {con.Email}</div>
                    </template>
                </th>
                <th scope="col">
                    <div>{keyValue.contactCount}</div>
                </th>
                </tr>
            </template>
        </tbody>
    </table>
  </div>
    </lightning-card>
</template>


JS
import { LightningElement,wire,track } from 'lwc';
import getAllAccountWithContacts from '@salesforce/apex/wrapperClassDemo.getAllAccountWithContacts';
export default class WrapperData extends LightningElement {
    data;
    error;
   
    @wire(getAllAccountWithContacts, {
    })
    wiredclass({
        data, error
    }){
        if (data) { 
            this.data  = data;
           console.log(JSON.stringify(this.data));
            this.error = undefined;  
           } else if (error) {  
            this.error = error;  
            this.data  = undefined;
           }  
    }
}