Types of decorators in Salesforce with examples

January 29, 2024February 9, 2024 Kashish Bansal

This blog will discuss the Types of decorators in Salesforce with examples. Decorators are used to add or alter functionality in Salesforce. In Lightning Web Components we have three types of decorators.

The following are the types of decorators:

api
track
wire

Let’s explore all the Types of decorators in Salesforce with examples one by one

1. @api

It is used to make any property or function public and reactive. By applying this decorator we are exposing any property or function to make it available for other components for communication.

To use it firstly, we have to import it from the LWC module and then we have to decorate the property or function that we want to make it public by adding @api.

Syntax:

import { LightningElement, api } from 'lwc';

Let’s understand this by taking a simple example.

To implement we have to create one LWC component just like below:

decorators.js

import { LightningElement, api} from 'lwc';
export default class Decorators extends LightningElement {
@api recordId
}

decorators.html

<template>
<lightning-card variant="Narrow" title="@api" icon-name="standard:account">
<p>{recordId}</p>
</lightning-card>
</template>

decorators.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>

Here in the above component, we are displaying the recordId of the current account and added this component on the Account Flexi Page. We have exposed the recordId as public by adding @api decorator to make communication with the current account record’s page as we do in the parent-child communication.

@api Example

Let’s also understand how @api works in parent-child communication.

Syntax:

parentComp.js

import { LightningElement } from 'lwc';
export default class ParentComp extends LightningElement {

message = ''
handleChange(event){
this.message = event.detail.value
}
}

parentComp.html

<template>
<lightning-card variant="Narrow" title="Parent Component">
<lightning-input
type="text"
variant="standard"
name="Message"
label="Message"
placeholder="type here..."
value = {message}
onchange={handleChange}></lightning-input>
</lightning-card>
<c-child-comp message-from-parent = {message}></c-child-comp>
</template>

parentComp.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>

The above syntax is the parent component from which we are passing the value to the child component.

childComp.js

import { LightningElement,api } from 'lwc';
export default class ChildComp extends LightningElement {
@api messageFromParent
}

childComp.html

<template>
<lightning-card variant="Narrow" title="Child Component">
<div>{messageFromParent}</div>
</lightning-card>
</template>

childComp.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>

Here, we have declared the messageFromParent property as public so that the parent component can communicate

api with parent to child

We have deployed the above component on the lightning__AppPage.

2. @track

To declare any property or method as private declare it with @track. In LWC all fields are reactive but if the field type is array or object, there are some limits to the depth of changes to be tracked. If we declare them with @track, we can observe the changes.

Please find the below code snippet to understand the track decorator.

decorators.js

import { LightningElement, track} from 'lwc';
export default class Decorators extends LightningElement {

nestedArr = {name:'salesforce geek',area:'salesforce'}
message

handleChange(event){
this.nestedArr.name = event.detail.value

}
}

In the above JS, we have declared one property of object nestedArr without track and when we try to change the name of nestedArr, It will not reflect.

decorators.html

<template>
<lightning-card variant="Narrow" title="@track">
<p>{nestedArr.name}</p>
<lightning-input
type="text"
variant="standard"
name="name"
label="name"
placeholder="type here..."
onchange={handleChange}></lightning-input>
</lightning-card>
</template>

decorators.js-meta.xml

<?xml version="1.0"?>
<div><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"></div>
<div><apiVersion>57.0</apiVersion></div>
<div><isExposed>true</isExposed></div>
<div><targets></div>
<div><target>lightning__AppPage</target></div>
<div></targets></div>
<div></LightningComponentBundle>

OUTPUT

In the above output, we can see the name does not reflect the updated changes.

Now let’s declare it with @track

decorators.js

import { LightningElement, track} from 'lwc';export default class Decorators extends LightningElement {

@track nestedArr = {name:'salesforce geek',area:'salesforce'}
message

handleChange(event){
this.nestedArr.name = event.detail.value

}
}

Want to Learn Salesforce Flows? Checkout our Salesforce Flow Course

OUTPUT

Output with track

3. @wire

In LWC we have several ways by which we can connect our component to salesforce data. Annotating our property or function with @wire is one of the ways to interact with the salesforce data.

Syntax:

import { LightningElement, wire } from ‘lwc’;

import <methodName> from ‘@salesforce/apex/<ApexClassName.apexMethod>’;

@wire(methodName, {methodParams})

propertyOrFunction;

methodName – It identifies the apex method.
ApexClassName – It is the apex class name
apexMethod – Method of apex class

Below is the code snippet showing an example of fetching account data by using wire.

DisplayDataInLWC.apxc

public with sharing class DisplayDataInLWC {

@AuraEnabled(cacheable=true)
public static List<Account> fetchAccountUsingWire()
{
return[SELECT Id,Name,Rating FROM Account WHERE Rating = 'Hot' LIMIT 5];
}
}

We have to annotate our class with @AuraEnabled to expose it for our LWC. Additionally, we have to also use (cacheable=true) for wire service.

displayDataSample.js

import { LightningElement,wire } from 'lwc';
import fetchAccountUsingWire from "@salesforce/apex/DisplayDataInLWC.fetchAccountUsingWire";
export default class DisplayDataSample extends LightningElement {

@wire(fetchAccountUsingWire) accounts;
}

Now this is our LWC component in which we are displaying the data. Here in JavaScript, we are importing the Apex method and then invoking it via Apex. The wire service will return the account data else error.

In the template we are using lwc:if directive to check whether data is present or not. A template for:each is used to iterate through the account data.

@wire is reactive it re-renders every time the data source gets changed.

displayDataSample.html

<template>
<lightning-card title="Apex Wire" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template lwc:if={accounts.data}>
<template for:each={accounts.data} for:item="account">
<li key={account.Id}>{account.Name}</li>
</template>
</template>
</div>
</lightning-card>
</template>

OUTPUT

FAQ’s

1. Can we access property or function annotate with @track?

No, declaring property and function with @track makes it private though we can’t access it outside our component.

2. Can we perform DML operation in wired function?

No, It is not possible to perform a DML operation in a function declared with @wire.

3. What are events in Salesforce?

In LWC, events serve as a means to send and manage messages or notifications between components. This functionality facilitates modular development, allowing components to communicate without being tightly connected.

Conclusion

In this blog, we discussed the Types of decorators in Salesforce with examples. Decorators provide additional functionality to our property or function. They are design patterns that add behaviours to our JS objects.

Get a complete Roadmap To Learn Salesforce Admin And Development

Share Now

Kashish Bansal

Kashish have extensive Salesforce development experience, holding 4 Salesforce certifications. she posses expertise in Apex, Lightning Web Components, and Salesforce Admin, with a track record of successful project delivery. As a dedicated Salesforce enthusiast, she actively seek and embrace new challenges and opportunities within the dynamic Salesforce ecosystem.

Types of decorators in Salesforce with examples

Let’s explore all the Types of decorators in Salesforce with examples one by one

1. @api

2. @track

Want to Learn Salesforce Flows? Checkout our Salesforce Flow Course

3. @wire

Also Read – Batch Apex in Salesforce with examples

FAQ’s

Conclusion

Get a complete Roadmap To Learn Salesforce Admin And Development

Kashish Bansal

One thought on “Types of decorators in Salesforce with examples”

Leave a Reply Cancel reply

Learn Salesforce Flows 👇

Prepare for PD1 Exam

Crack the Admin Exam

Book a 1:1 Call 👇

Featured on Apex Hours

Types of decorators in Salesforce with examples

Let’s explore all the Types of decorators in Salesforce with examples one by one

1. @api

2. @track

Want to Learn Salesforce Flows? Checkout our Salesforce Flow Course

3. @wire

Also Read – Batch Apex in Salesforce with examples

FAQ’s

Conclusion

Get a complete Roadmap To Learn Salesforce Admin And Development

Kashish Bansal

Similar Posts

Batch vs Queueable vs Future vs Schedulable Apex

Test Class Best Practices in Salesforce

One thought on “Types of decorators in Salesforce with examples”

Leave a Reply Cancel reply