Tracked Properties in Lightning web component

Let us understand how to use the Tracked Properties in Lightning web components. To track a private property’s value and re-render a component when it changes, decorate the property with @track.Tracked properties are also called private reactive properties. Modern JavaScript framework is supporting “reactive,” properties which mean it can automatically refresh your data when changes have happened to the property and what does mean “private reactive “.private reactive means the data changes are atomically refreshing on the UI and not exposed to the other components or an app builder.These properties are strictly inside the component. Now let us understand the ways you can take advantage of this in your apps. 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. Refer this link for development environment setup

Create a Lightning web component using the SFDX command

Here is the simple component that will show the message on the UI using the JavaScript property

Here is the TrackedProperties.html code

Here is the TrackedProperties.js code

Here is the TrackedProperties.js-meta.xml

Push changes to scratch org and add the changes to record page .you can able to see as shown below.

Now when you click on update message the property is updated in JavaScript controller but the changes won’t update in the UI. You can able see the below message in chrome console when you click on “Update Message”

You can able to make the property trackable by using the track decorator .Import @track from the lwc module. This decorator is unique to the Lightning Web Components programming model.

You can use @track to decorate a property only; you can’t use it to decorate an object. You can decorate multiple properties with@track, but each property can have only one decorator. For example, you can’t decorate a property with both @track and @api. Let’s update the same code with the @track decorator which will reflect the changes to UI on button click.

update the JavaScript controller as shown below

Now when you click on the Update message you can able to see the result changes on the UI

Now let us make some more changes to make the @track property looks like a two-way data binding.

Update the TrackedProperties.html code as shown below

Update the JavaScript Controller as shown below

Now when you enter any text in input box the message will update like two-way binding as shown below

Now let’s look at sample code with a parent component passing property to a child component. This example will display the progress bar from the enter input number and we have two components here chartBar,apiProperty.

create a new lightning web component using the following SFDX command

Use this code in chartBar.html

Here is the chartBar.css

Now, let’s call this chartBar.html code from the parent component. now create a new lightning web component using the following SFDX syntax.

use this code in apiProperty.html

Use this code in the apiProperty.js class


Use this code in apiProperty.js-meta.xml

Push changes to scratch org and add apiProperty.html code to the record page .you can able to see the output as shown below


The c-api-property component uses its tracked percentage property to pass a value down to the public percentage property on its child c-chart-bar component. Components that consume c-api-property can’t get or set its percentage property because tracked properties are private.Its you want to make it as public property you need to use the @api decorator .