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-08
Wire with Property HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <lightning-card title="Wired with Property" icon-name="utility:user"> <template if:true={accounts.data}> <div class="slds-var-m-around_medium"> <template for:each={accounts.data} for:item="acc"> <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small"> <lightning-layout-item flexibility="grow"> {acc.Name} </lightning-layout-item> </lightning-layout> </template> </div> </template> </lightning-card> </template> |
1 2 3 4 5 6 | import { LightningElement, wire } from 'lwc'; import getAccountList from '@salesforce/apex/AccountController.getAccList'; export default class BindWirewithProperty extends LightningElement { @wire(getAccountList) accounts; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <lightning-card title="Wired with Function" icon-name="utility:user"> <template if:true={accounts}> <div class="slds-var-m-around_medium"> <template for:each={accounts} for:item="acc"> <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small"> <lightning-layout-item flexibility="grow"> {acc.Name} </lightning-layout-item> </lightning-layout> </template> </div> <div class="slds-var-m-around_medium"> <br/> {error} </div> </template> </lightning-card> </template> |
Wire with Function JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { LightningElement, wire } from 'lwc'; import getAccountList from '@salesforce/apex/AccountController.getAccList'; export default class BindWirewithFunction extends LightningElement { accounts; error; @wire(getAccountList) wiredAccounts({error, data}){ if(data){ this.accounts = data; this.error = undefined; } else if(error){ this.error = error; this.accounts = undefined; } } } |
APEX
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | public with sharing class AccountController{ @AuraEnabled(cacheable=true) public static List<Account> getAccList(){ return [SELECT Id, Name FROM ACCOUNT ORDER BY CreatedDate desc Limit 10]; } @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]; } @AuraEnabled(cacheable=true) public static Account getSingleAccount(){ return [SELECT Id, Name, Phone FROM ACCOUNT ORDER BY CreatedDate desc Limit 1]; } } |
Checkout complete video tutorial below
0 Comments