Lightning Web Components

Decorators and Properties in Lightning Web Components

Decorators in LWC

There are three majorly use decorators in lightning web components:

  • @api

@api decorators is used to make properties or methods in lightning web component public this way they are accessible outside of the component in which they are declared. For example a parent component can set the value of a property in a child component

  • @track

@track decorator is basically used to make properties or a method
private in lightning web components this property is not accessible outside of lightning that component when in which it is declared

  • @wire

@wire is basically used to read the Salesforce data from apex class into lightning web component. It is generally used while making a server calls to apex class .

Properties in LWC

There are two types of properties in lightning web components:

  • Reactive Properties
    • In case of reactive properties if the value of property changes component gets every rendered

Reactive properties are of two types :

  1. Public reactive properties : Public reactive properties are the one which are declared using @api decorator
  2. Private reactive properties: Private properties are the one which are declared using @track decorators.

  • Non Reactive Properties

Non reactive properties are declared without any decorator ,so even if the value of non reactive property changes component does not get re-render .

However, as per Salesforce Spring ’20 Release Notes , All properties are made reactive proeprties.If property value changes, and the property is used in a template or if a getter of a property that’s used in a template, the component rerenders and displays the new value.

Lets understand all these with the help of exmaples:

We will create two components, one inside another . Let child component be childY and parent be parentY.

childY component

We will create three properties in child component lets say “trackParam”, “apiParam”, “nonReactiveProp” where “trackParam” is private reactive property as it is annoted with @track, “apiParam” is public reactive property as it is annoted with @api and “nonReactiveProp” is non reactive propertiy in javascript file.

Also we have added default values to these properties.Further we have added a button “Test Behaviour” on click of which we will change the value of properties one by one to check the behaviour of component.

childY.html

<template>
<lightning-card title="trackProprtyDemo" icon-name="standard:account">
    Hello {trackParam}
</lightning-card>
<lightning-card title="apiPropDemo" icon-name="standard:account">
    Hello {apiParam}
</lightning-card>
<lightning-card title="nonReactiveDemo" icon-name="standard:account">
    Hello {nonReactiveProp}
</lightning-card>

<div>
    <lightning-button label="Test Behaviour" onclick = {handleparamValues}></lightning-button>
</div>


</template>

childY.js

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

export default class ChildY extends LightningElement {

    @track trackParam = "trackValue";
    @api apiParam = "apiValue";
    nonReactiveProp = "nonReactiveValue";

    handleparamValues(){
       this.trackParam = "value changed for trackParam";
       this.apiParam = "Value changed for APIParam";
       this.nonReactiveProp = "value changed fro non reactive Param";
    }

}

parentY

In the parent component, we are just passing the value to apiParam property of childY component as it is public property.

parentY.html

<template>
    <c-child-y api-param="api Value from Parent" track-param = "track value from parent"></c-child-y>

</template>

parentY.js

import { LightningElement } from 'lwc';

export default class ParentY extends LightningElement {}

Now if you include parent component inside Aura application and load the application you will notice that for “trackParam”and “nonReactiveProp” properties the default values in JS file are displayed and for “apiParam” property , the value passed from parent component is displayed.

Now , If you click on Test Behaviour button, the value of all these properties changes and component gets re-render and new values are displayed.

So , we will wrap up this post here . Stay tuned for next posts !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s