Let us discuss here how to use the decorators in the Salesforce lightning web component development .decorators dynamically alter the functionality of a function, method The Lightning Web Components programming model has three decorators that add functionality to property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components. Salesforce Lightning web components support the below decorators

  1. @track
  2. @api
  3. @wire

Here in this post, we will be discussing each decorator and how exactly we need to use each one.

@track decorator 

The fundamental way detects the DOM changes is through tracked properties. Tracked properties are just like normal properties on your component but these properties are private property’s value and re-render a component when it changes. decorate property is annotated with@track. Tracked properties are also called private reactive properties mean the changes will reflect only in the component. You can use a tracked property directly in a template. You can also use a tracked property indirectly in a getter of a property that’s used in a template. Let us discuss here more on what is the private properties and how to use @track decorators

Create a simple lightning web component that contains properties that will update the value to the UI based on the user interface changes

Use the below SFDX command to create a new Lightning web component

use this code in decoratorex.html. The Markup contains the input field that will re-render the values to the UI based on the input change.

use the below decoratorex.js code. the code contains one property inputMessage.

Use the below decoratorex.js-meta.xml markup

Push the changes and add this component to the record page. Now the issue is with the above code is the property values is an update in the JavaScript controller and the changes won’t reflect the UI. In the below screenshot shows the property values are updating in the controller and the changes won’t reflect in the UI.

 

Now how to make the property changes to updates on the UI. Now update the property with @track decorator which makes the property as trackable property means the changes in the controller will update the UI.

Update the decoratorex.js JavaScript controller with below code and push the changes to scratch org

 

Now you can able to see the changes will reflect on the UI  as shown below.

 

What is the limitation of the track decorators?

As of now, we are seeing the inputMessage property is changes are reflected on UI from the JavaScript controller and now let’s try to pass the values from app builder into the inputMessage property.

update the decoratorex.js-meta.xml and push the changes to the scratch org.

Now you will get the below error message by saying the inputMessage property does not exist because this property is tracked properties and which is private.

 

 

And the second limitation with @track property is you can’t pass the property form the parent component. create a new web component

using the below sfdx command.

and now try to set the inputMesasge.

try to push the changes to scratch org and you will get the error message as shown below.

 

Now track decorator is having the following limitations

  1. You can’t expose these properties to app builder
  2. You can’t pass the properties from the other components. tracked properties are also called private reactive properties. and let’s see how to fix these two issues using @api decorator

 

@api decorator

To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property. To expose a public method, decorate it with @api. Public methods are part of a component’s API. You can use a JavaScript method to communicate down the containment hierarchy. For example, an owner calls a method on a child component that it contains.

Now let discuss here how to use @api decorator to solve the two limitations with @track and update the code as shown below

update decoratorex.html markup with the below code.

update the decoratorex.js code as shown below

 

 

use the decoratorex.js-meta.xml code

 

 

 

Push changes to scratch org and add this component to the layout using app builder and now you can able to see the inputMessage property is configured from the app builder as snow below.

Now go to the container.html and you can able to set the property

 

Now to conclude what @api decorator will do

  1. Expose the property as public property
  2. Expose the property to the App Builder
  3. Pass the property values  from the parent component

 

 

 

@wire decorator

Now let us take another use case .if you want to get the inputMessage from the apex class you need to use @wire .

@wireTo read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

create a simple apex class with the below code

 

update the  decoratorsex.js with below code

 

push changes to scratch org and now you can able to see the inputMessage property values is coming from the apex class.You can able to see as shown below

 

 

Summary

  1. @track properties are private reflective properties .you cant pass the property values from the app builder or from the parent component
  2. @api properties are public properties that are possible to set by app builder or possible to pass the value from the parent component
  3. @wire decorate is used to read the values from the Salesforce data.