Salesforce Menu

Decorators

The Lightning Web Components has three decorators that add functionality to property or function.

  1. Track
  2. API
  3. Wire

@track

The Basic way to detect the DOM changes is through tracked properties. Tracked property behaves the same as other private property works in other languages. It re-renders when the value changes for this property. Track property can be defined as @track decorator. It also is known as private reactive property. Private reactive property means it will only be available for the current component where it has declared.

Example

Salesforcedriller.html
<template>
   <lightning-card title="salesforce Driller">
     <div class="slds-m-around_medium">
       <p>Hello, {salesforceDriller}!</p>
       <lightning-input label="Name" value={salesforceDriller} onchange={changeHandlerEvent}></lightning-input>
     </div>
   </lightning-card>
</template>


Sfdriller.js
import { LightningElement } from 'lwc';
export default class salesforceDriller extends LightningElement {
   salesforceDriller = 'Salesforce';
changeHandlerEvent(event) {
  this.salesforceDriller = event.target.value;
}
}


Explanation

changeHandlerEvent: This method will fire when we edit the input text field. The text will be changed after editing the text input field because this is the track property.

output

Output

output

Limitation
  • We can not expose the track property to the app builder
  • Track property can not be passed to the child component.

@api

To expose a public property in LWC we use @api decorator. @api is the public reactive property. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property. @api decorator is used in the parent-child hierarchy relationship of the component to pass the data from parent to child component we use the public property.

What can we do with the public reactive property
  • Expose the property as a public
  • Pass data from parent to child
  • Can be used in the app builder

Note: To use the API property we need to import it from LWC.

import { LightningElement, api } from ‘lwc’;

Example

Sfdrillerapi.html
<template>  
 <lightning-card title="Salesforce Driller">
     <div class="slds-m-around_medium">
       <p>Hello, {salesforcedriller}!</p>
     </div>
   </lightning-card>
</template>

output

Sfdrillerapi.js
import { LightningElement, api } from 'lwc';
export default class salesforcedriller extends LightningElement {
  @api salesforcedriller ='Salesforce Driller';
}

output

Explanation: As we can see in the above controller we have used the public property which is @api. i.e @api salesforcedriller.

Output

output

@wire

Lightning web components can call apex methods from Apex classes into the client-side classes. After importing the apex class method we can call the apex methods as functions into the component by calling wire service. The Apex Method should be started with @AuraEnabled.

We need to import the apex class and the method to call the apex method.

Syntax:
import apexMethod from ‘@salesforce/apex/Namespace.Classname.apexMethod’;

Example

Let’s create the apex method

Accountcontroller.js
public class accountclass {
   @AuraEnabled (cacheable=true)
   public static List accountclass() {
       List acc=[select id,name from Account limit 5];
       return acc;
   }
}

output

Create the component

Salesforcedriller.html
<template>
   <lightning-card title="Account List using Apex Wire To Function in Salesfroce Driller" icon-name="custom:custom63">
       <div class="slds-m-around_medium">
           <template if:true={accounts}>
               <template for:each={accounts} for:item="acc">
                   <p key={acc.Id}>{acc.Name}</p>
               </template>
           </template>
           <template if:true={error}>
               {error}
           </template>
       </div>
   </lightning-card>
</template>


output

Salesforcedriller.js
import { LightningElement, wire,track } from 'lwc';
import accountclass from '@salesforce/apex/accountclass.accountclass';
export default class AccountListLWC extends LightningElement {
   @track accounts;
   @track error;
   @wire(accountclass)
   wiredAccounts({ error, data }) {
       if (data) {
           this.accounts = data;
       } else if (error) {
           console.log(error);
           this.error = error;
       }
   }
}

output

Output

output

Explanation

import accountclass from ‘@salesforce/apex/accountclass.accountclass’; : This statement will import the apex method and the class where we have the business logic.

@wire(accountclass)
wiredAccounts({ error, data })

The above statement calls the apex method with the help of wire method.error and data are two parameters which is the callback to hold the response from the server.

Subscribe Now