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

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>

Sfdrillerapi.js

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

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

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;
   }
}

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>

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

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.