LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.
So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together ! Please check complete code below from LWC Stack EP-13
Parent HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template> <lightning-card title="I am Parent with Nesting" icon-name="utility:user"> <div class="slds-var-m-around_medium"> <lightning-input onchange={handleOnChange} label="Search"> </lightning-input> </div> <div class="slds-var-m-around_medium"> <template if:true={myData}> <template for:each={myData} for:item="acc"> <c-child-Component-Basic key={acc.Id} mydata={acc}> </c-child-Component-Basic> </template> </template> </div> </lightning-card> </template> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { LightningElement } from 'lwc'; import findAccList from '@salesforce/apex/AccountController.findAccList'; export default class ParentComponentwithChildNestingIteration extends LightningElement { myData; error; handleOnChange(event) { const keyword = event.target.value; if (keyword != null && keyword.length >0) { findAccList({ keyword }) .then((result) => { this.myData = result; this.error = undefined; }) .catch((error) => { this.error = error; this.myData = undefined; }); } else{ this.myData = undefined; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <lightning-card title="I am child Nested" icon-name="utility:user"> <template if:true={mydata}> <div class="slds-var-m-around_medium"> <b>Name : {mydata.Name} <br /> Phone : {mydata.Phone} </b> </div> </template> <template if:false={mydata}> No Data found. </template> </lightning-card> </template> |
Child JS
1 2 3 4 5 | import { LightningElement,api } from 'lwc'; export default class ChildComponentBasic extends LightningElement { @api mydata; } |
APEX
1 2 3 4 5 6 7 | public with sharing class AccountController{ @AuraEnabled(cacheable=true) public static List<Account> findAccList(String keyword){ String key='%'+keyword+'%'; return [SELECT Id, Name,Phone FROM ACCOUNT WHERE Name LIKE:key ORDER BY CreatedDate desc Limit 10]; } } |
Output
2 Comments
Can you please add the Apex class here
ReplyDeleteAdded it :)
Delete