Javascript properties in lightning web component

    properties in lwc:-

 

In any programming languages we will need variables to hold data and in lightning web components we call them properties.

  Property names in JavaScript are in  camel case while HTML  attribute names are in kebab case(dash-  separated) to match HTML  standards. For example a javaScript  property named  firstName  maps to   an  HTML  attribute named first-name.

   In lightning web components  we have two types of properties those are

1. Private and Reactive Properties
2. Public Properties
3. Getter

   Non-Reactive Properties.      

       when ever  the values changes to the property  then it does not re-render the component 

           we don't need to use decorator  to define this type of property.

   Example:

testLwc.html

<template>

<lightning -card title = "Non-Reactive" >

                 {description}

<lightning button label = "change value" onclick = {changeHandler}></lightning-button>

</lightning-card>

</template>

testLwc.js:

import { LightningElement } from 'lwc';

export default class TestLwc extends LightningElement {

        description = "test ";      //Non-Reactive property 

         changeHandler(){

             this.description = "lightning web components";

}

}

  2. Reactive Properties .

      If   the value of  property changes  then it  re-render the component's template is called reactive 

      the reactive property can be public or private  in lightning web components .

                       A.   Public 

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 a reactive property changes, the component rerenders. When a component rerenders, all the expressions used in the template are reevaluated.

 Private and Reactive Properties:-

Private properties are only accessible in the component it is declared. It is declared using only identifier name. We don’t have to provide any keyword for datatype. We can also assign a default value to Private property.

Syntax for declaring Private Properties:

import { LightningElement } from 'lwc';   export default class LwcComp extends LightningElement {       // This is Private property.     strName = ''; }

In above example, we have declared strName as Private Property. We can access any property in component as {strName}.

My name is {strName}

Previously, Private properties were not Reactive by nature. In Spring’20 release, all Primitive Private properties are made Reactive. but what is Reactive properties?

Reactive Properties

When value of the property is updated in JS Controller, it should be reflected on UI as well. Only values of the Reactive properties are reflected on UI once it is updated in JS Controller. Primitive Private properties are Reactive by nature but in order to make Non-primitive properties Reactive, we have to use track decorator. So it creates a one way binding from JS Controller to Component.

First import the track decorator in our JS Controller and use @track while declaring property to make it Reactive just like below:

import { LightningElement, track } from 'lwc';   export default class LwcComp extends LightningElement {       // Non-primitive property.     @track list = ['aura', 'lwc']; }

So whenever list property is updated in JS Controller, it will be reflected on UI

Public Boolean Properties:-

Boolean Public properties works as normal HTML 5 Boolean attributes. When passing value to Boolean property of Child component, we just need to mention the name of Boolean property in Child component tag as attribute like below

<c-child-cmp str-public-name='hello' bool-show-name></c-child-cmp>

Here, bool-show-name is Public Boolean property. There is no need to assign a value to it. If Boolean property is mentioned, its value will be True even though we assign its value as False explicitly. Hence if you want to pass True, just mention the property name as attribute name in Kebab case. If you want to pass False, don’t mention the property name at all. Hence it is also important to assign default value as False in JS Controller like below:

api boolShowName = false;

 Getter:-

A Getter is used to compute the static values. Getter is defined in JS Controller just like methods but prefixed with get keyword like below:

get accountName(){     return 'My name is ' +this.strPublicName; }

To access this Getter on UI, we just need to use {accountName}..

    NOTE  after spring 20 release  the @track decorater  has been deprecated .