What are the type of properties in LWC JS file?

In LWC JS file, we have declared property with camel case to map attribute with kebab case in LWC HTML file.Whenever we will speak about attribute means we are referring HTML file and whenever we will speak about property means we are referring JS file.

Basically, there are two types of properties such as Reactive Properties and Private Properties.

Reactive Properties has of three types such as Public Property, Tracked Property & Boolean Property.

Reactive Properties

Public Property: If you want to make the property to be called from other component, you need to declare this property with @api decorator in the calling component. Along with this, if the value changes on this property, component will be re-rendered automatically. That’s why, it’s reactive.

Track Property: If you want to track the property’s value, you need to declare this property with @track decorator. Along with this, if the value changes on this property, component will be re-rendered automatically. That’s why, it’s reactive. Track property is also called private reactive property. Because, caller component or component A can not call with @track decorator property to the calling component or component B.

Boolean Property: By default, Boolean Property has the value of false. If you call the component with just  Boolean Property name, the Boolean value would be true and component will also be re-rendered due to @api decorator. That’s why, it’s reactive.

Private Property

Private Property can be used only by the JS class in JS file. If the value changes on private property, the component doesn’t re-render. So, it’s not reactive. You should not put any decorator (@api, @track) for declaration of private property.

Assignment

Let’s say, we will show the incremental value in a child component, but when parent component will instruct to show the incremental value one by one at that point of time, child component will work.

Solution

So, we have created two  Lightning Web Components such as incremental(Child Component) and callIncremental(Parent Component). Let’s focus on child component, incremental.

Step 1: create one LWC named incremental.

Step 2: open the incremental.html file

incremental.html | to show the incremental value one by one

<template>
    <lightning-card title={sectionName}>    
        <lightning-layout>
                <lightning-layout-item flexibility="auto" padding="around-small">                    
                    <template if:true={enableIncrement}>
                        {incrementValue}
                        <lightning-button label="+" variant="brand" onclick={increment} class="slds-m-left_large"></lightning-button>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
    </lightning-card>  
</template>

Step 3: open the incremental.js file

incremental.js | to define the attributes

import { LightningElement, api, track } from 'lwc';

export default class Incremental extends LightningElement {
    @api sectionName;
    @api enableIncrement;
    @track incrementValue = 1;
    incrementBy = 1;

    increment(){
        this.incrementValue = this.incrementValue + this.incrementBy;
    }

}

Here, we have declared sectionName, enableIncrment as the public property with @api annotation that means we will send the value for these properties from other component named “callIncremental”. As Reactive Properties rule, if the values are changed to the properties, the component will be rerendered automatically.

We have defined incrementValue property with @track decoration to calculate the incremental value which will be visible in the screen by clicking  [+] button.

Step 4: create another LWC named, callIncremental which is the parent component.

Step 5: we need to place this parent component in Lightning Experience. So, we need to update the respective js-meta.xml file.

callIncremental.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="callIncremental">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

Step 6: Please open callIncremental. html file and call the child component, incremental with certain attributes.

callIncremental. html | to call the incremental component

<template>
    <c-incremental enable-increment section-name="Increment One by One"></c-incremental>
</template>

Here, you can see that we have used kebab case during call the child component “incremental”.

Result

Notes

Remember, you can not set the public property(@api) in the current component’s js file. Remember, you can only set the value of a public property during component construction time means you can only send the value for public property.

For example, If we will set the public property named “sectionName” in our “incrmental” component,  we will not get this section name in the output.

22,710 total views, 9 views today