Habilelabs-Logo
Blog

Salesforce – Decorators in Lightning Web Components

March 16th, 2020 . 4 minutes read
Blog featured image

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:

 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

Decoration with A Property

@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:

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

  1. api_example_child
  2. api_example_parent

api_example_child

In .html-

@api in html

In .js-

@api 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.

api_example_parent

In .html-

@api parent 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-

@api parent in .js

Final Output:

@api 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.

Example:

We have a component named as track_example

In .html-

@track example in html

In .js-

@track example in .js

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

@track example output with component
@track example output with LWC

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.
  • While using the @wire to call the apex method from a class, the apex method must always be annotated with @AuraEnabled(cacheable=true).
  • 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.

After know Salesforce Basics, you can go ahead forward to know about Reasons to use Angular in Salesforce Visualforce pages.

You can drop your queries in the comment box, if any.

Author: Mayank Tolambia
Share: