You need to sign in to do that
Don't have an account?
Afrose Ahamed
how to pass records from parent to child lwc
Hi All,
I have created Parent component in that when Account search its needs to display contacts. its successfully displayed. i Want to display contacts on child component. So i created on child component and passed values. But its nothing showin. Please help thanks in advance.
Parent Component <template> <lightning-card title="How to display the Contacts based on Account Name in LWC" custom-icon="custom:icon13"> <div class="slds slds-p-horizontal--medium"> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_4-of-12 slds-m-bottom--medium"> <lightning-Input type="search" placeholder="Search..." value={accountName} name="accountName" class="accountName" onchange={handleChangeAccName}></lightning-input> </div> <div class="slds-col slds-size_6-of-12 slds-m-top--medium" style="margin-top: 19px; margin-left: 10px;"> <lightning-button label="Search Account Name" size="small" variant="brand" onclick={handleAccountSearch} icon-name="utility:search" icon-position="right"></lightning-button> </div> </div> <h2>Account Name :- <span><strong>{currentAccountName}</strong></span></h2> <h3><strong><span style="color:brown;">{dataNotFound}</span></strong></h3> <template if:true={flagIndicatingDataHasBeenLoadedInVariables}> <c-child-comp records-value={records}></c-child-Comp> </template> </div> </lightning-card> </template> ***************************************** import { LightningElement, track, wire } from 'lwc'; import retrieveContactData from '@salesforce/apex/lwcAppExampleApex.retrieveContactData'; export default class DisplayContactsOnAccountName extends LightningElement { @track currentAccountName; @track searchAccountName; handleChangeAccName(event){ this.currentAccountName = event.target.value; } handleAccountSearch(){ this.searchAccountName = this.currentAccountName; } @track records; @track dataNotFound; @track flagIndicatingDataHasBeenLoadedInVariables = false; @wire (retrieveContactData,{keySearch:'$searchAccountName'}) wireRecord({data,error}){ if(data){ this.records = data; this.error = undefined; this.dataNotFound = ''; this.flagIndicatingDataHasBeenLoadedInVariables = true; if(this.records == ''){ this.dataNotFound = 'There is no Contact found related to Account name'; } }else{ this.error = error; this.data=undefined; } } }
Child Component <template> <h2 class="slds-m-bottom--x-small" style="color:darkslateblue; font-weight:bold;">Displaying Contacts Records based on Account Name</h2> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc" style="border-collapse:collapse;"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Phone</th> <th>Description</th> </tr> </thead> <tbody> <template for:each={records} for:item="conItem"> <tr key={conItem.Id}> <td>{conItem.FirstName}</td> <td>{conItem.LastName}</td> <td>{conItem.Email}</td> <td>{conItem.Phone}</td> <td>{conItem.Account.Name}</td> </tr> </template> </tbody> </table> <br/><br/> </template> **************************************************** import { LightningElement,api } from 'lwc'; export default class ChildComp extends LightningElement { @api recordsValue; }
Regards,
Afrose Ahamed M.G.
Refer the below link have solution for similar kind of ask and modfiy the code as per your need.
https://studysection.com/blog/how-to-show-list-of-related-records-using-search-filter-in-lwc/
If this information helps, Please mark it as best answer.
Thanks!!