Salesforce – Decorators in Lightning Web Components

ByMayank Tolambia

March 16th . 5 min read

Salesforce – Decorators in Lightning Web Components

Decorators are literally used to decorate the code with clean syntax. They are simple functions and placed immediately before the code that is being decorated.

Overview About Decorators

These Decorators dynamically change the functionality of property or function.
They are identified with the symbol ‘@’ as prefixed before a method or a variable name.
Whenever we want to use any decorator, we must need to explicitly import it from ‘lwc’ as shown below:

import {LightningElement, decoratorName} from 'lwc';

In Lightning Web Components, we are having three types of Decorators.

@api
@track
@wire

Here, we have shown in detail how to decorate a method or a property-

Decoration with a Method

@decoratorName
getMethodName()
{
    return somevalue;
}
Ex: @track
getName()
{
return name;
}

Decoration with A Property

@decoratorName propertyName='propertyValue';
Ex: @api name = ‘John’;

@api:

With @api, we can expose a public property.
Public properties are reactive.
If the value of public property changes, the component re-renders., so when a component is re-rendered, all the expressions used in the template are re-evaluated once again.

Import the @api decorator from lwc as shown below:

import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement     {
    @api name= 'John';
}

Parent component can make use of the Public Property.
A component that declares a public property can set only its default value.
A parent component that uses the child component in its markup can set the child component’s public property value.

Let us understand @api decorator with the help of an example:

We have 2 components:

api_example_child
api_example_parent

api_example_child –

In .html-

salesforce-decorators-in-lightning-web-components-1.jpg

In .js-

salesforce-decorators-in-lightning-web-components-2.jpg

Here, we have a course as public property as it is decorated with the @api course. Now, parent components can make use of this Public Property course.

api_example_parent–

In .html-

salesforce-decorators-in-lightning-web-components-3.jpg

Here, Course is the public property (i.e @api) of the child component so its values can only be passed by parent components as shown above.

In .js-

salesforce-decorators-in-lightning-web-components-4.jpg

Final Output:

salesforce-decorators-in-lightning-web-components-5.jpg

@track :

With @track, we can expose a Private reactive property.
Here, Reactive means if there is any change in JavaScript property, the component will re-render and all the expressions used in the template will be re-evaluated again.
The properties, which must be used within the component where it’s been defined, are termed as Private Properties.
When we use the @track decorator, we must import it explicitly from ‘lwc’ as shown below.

import { LightningElement, track } from 'lwc';

Example:

We have a component named as track_example–

In .html-

salesforce-decorators-in-lightning-web-components-6.jpg

In .js- salesforce-decorators-in-lightning-web-components-7.jpg

Here,

Description is private reactive property as it is declared with @track. So, it can only be changed with-in the component where it is defined. (track_example).
The default value for description is ‘Lightning Web Component Decorators’. So, when we click on the ‘Update Message’ button on the UI, the description property value is getting updated.

Output

salesforce-decorators-in-lightning-web-components-8.jpg

Then, Click on ‘Update Message’ Button.

@wire:

By nature, it is reactive.
When inside the Lightning web component, we need data from Salesforce, we go with @wire as it is used to read the salesforce data.
When we use the @wire decorator, we must import it explicitly from ‘lwc’ as shown below.

import { LightningElement, wire} from 'lwc';

While using the @wire to call the apex method from a class, the apex method must always be annotated with @AuraEnabled(cacheable=true).

public class wireFromLWC {
@auraEnabled(cacheable = true)
public static string retrunName(){
	return ‘John’;
}
}

Those apex methods which are not ‘cacheable=true’ can’t be called via @wire decorator.
The data returned by apex method can’t be modified within the .js file.
The refreshApex functionality can only be used with @wire property or function.

Conclusion:

In this blog, we have learned about the decorators used in the Lightning Web Components (LWC) that can add the functionality to a method or a property as per the business requirements.

All the above-mentioned decorators are unique to LWC. I hope that you find this information beneficial for your next project.

Thank You for reading!