Salesforce – Decorators in Lightning Web Components

ByMayank Tolambia
March 16th . 5 min read

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

    return somevalue;
Ex: @track
return name;

Decoration with A Property

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


  • 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-


In .js-


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.


In .html-


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-


Final Output:


@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';


We have a component named as track_example–

In .html-


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


  • 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.


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

Then, Click on ‘Update Message’ Button.


  • 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.


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!