How to display the Contacts based on Account Name in Lightning WebComponent



Video link
=========
https://www.youtube.com/watch?v=IkKFPHy29FU&t=16s
Apex Class
==========
public with sharing class AccountController {

    @AuraEnabled(cacheable=true)
    public  static List<Account> getAccounts()
    {
        List<Account> acclist=[select Id,Name from  Account LIMIT 5];
        return acclist;

    }
    @AuraEnabled(cacheable=true)
    public static List<Contact> getAllContacts(String searchKey)
    {
        System.debug('Entered into contact method');
   
        List<Contact> returnconlist=new List<Contact>();
        for(Contact con:[select LastName,Account.Name from Contact where Account.Name=:searchKey])
        {
            returnconlist.add(con);
            System.debug('Contact list size'+returnconlist);

        }
        if(returnconlist.isEmpty())
        {
            System.debug('No Records found'+returnconlist.size());
        }
        return returnconlist;
    }
}


contactsSearch.html
===================
<template>
<b>Accounts</b>
   <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
      <tr>
        <th>Select</th>
        <th>AccountName</th>
     </tr>
      <template for:each={accounts.data} for:item="acc">
        <tr  key={acc.Id}>
           <td>
              <lightning-input type="radio" name="radioButton" value={acc.Name} onchange={handleClick}>
              </lightning-input>
           </td>
           <td>
              {acc.Name}
           </td>
        </tr>
       </template>
  </table>
  <template if:true={records}>
<b>Contacts</b>
       <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
            <tr>
                <th>LastName</th>
            </tr>
            <template for:each={records} for:item="con">
            <tr  key={con.Id}>
               <td>
                  {con.LastName}
               </td>
            </tr>
            </template>
       </table>
   </template>
</template>


contactsSearch.js
=================
import { LightningElement, wire,api } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import getAllContacts from '@salesforce/apex/AccountController.getAllContacts';
export default class ContactsSearch extends LightningElement {
    @wire(getAccounts) accounts;
    @api  currentAccName;
    @api records;
    @api error;
    @wire(getAllContacts, {searchKey:'$currentAccName'})
    wiredContact({ error, data }) {
        if (data) {
            this.records = data;
            this.error=undefined;
       
        } else {
            this.error=error;
            this.records = undefined;
        }
    }
    handleClick(event)
    {
        const acntname=event.target.value;
        console.log(acntname);
        this.currentAccName=acntname;
    }
}






















Comments