Tech Blog | Mobile App, eCommerce, Salesforce Insights
In Salesforce Development

How To Use Properties In Lightning Web Component Salesforce

3 Mins Read

In LWC properties are similar to JavaScript properties. In js file of component you can declare your properties using camel casing and in your Html you can write same name using kebab casing called attribute this way both will be mapped to each other. Ex : In js file I have a property as showFeature and its corresponding attribute in Html file written as show-feature . This way both will be mapped to each other and value of property will be visible in html.

There are two types of properties in LWC

  • Reactive Properties
  • Non-reactive Properties

Before starting with this lets understand with decorators

What is decorator?

Decorator is a part of ECMA script and used to add extra functionality in your function or methods. In LWC we use 3 decorator to enhance the functionality of our property or function.
@track
@api
@wire

Reactive Properties

If value of any reactive property changes and that is used in any template then that template will re-render and it will evaluate again all the expression written in template. It can be of two type.

  • Public properties
  • Private properties

Also Read: Difference: Data Loader vs Import Wizard

Public Properties

In order to expose any property as public we decorate it as @api. Along with decoration you have to import this in your js file as

import { LightningElement, api } from 'lwc';

These public properties can be used by the parent component. The component that set a property as public can set only its default value. It’s not like you can’t change but it’s preferable that parent change and play with its value.

hire salesforce developers

Private Properties

In order to expose any property as public we decorate it as @api. Along with decoration you have to import this in your js file as

import { LightningElement, track } from 'lwc';

These can be used by the component in which it is defined.

Let’s understand the difference between public and private with the help of an example.

Create a web component named parentEx.

In parentEx.html

<template>
    <lightning-card title='Properties'>
        Your Birthdate is : (Tracked property) :  {inputDate} <br/>
    </lightning-card>
</template>

parentEx.js

import { LightningElement, api } from 'lwc';

export default class ParentEx extends LightningElement {
    @api inputDate = '13 December';
   // a non reactive property
    // dateVal = 'Date is : ';
    
   
}

Create another web component named superParentEx. Leave its js file as it is.
In superParentEx.html

<template>
    Super Parent Example : 
    <c-parent-Ex input-date='24 March (Set by parent )'></c-parent-Ex>
</template>

Now add the superParentEx component in your view or in aura application and check the result. You will see the value of inputDate will be visible as set in parentEx component.

Now change track with api in js file of parentEx component and check the result again. You will see now superParentEx is able to change the value of inputDate property now.

For salesforce consulting of your project get in touch with our team and hire us for salesforce development services.

Learn More: How To Call Apex Method In Lightning Web Components and How to Create a Salesforce Lightning Map Component?

Avatar photo
Author

With a decade of experience in eCommerce technologies and CRM solutions, Virendra has been assisting businesses across the globe to harness the capabilities of information technology by developing, maintaining, and improving clients’ IT infrastructure and applications. A leader in his own rights his teammates see him as an avid researcher and a tech evangelist. To know how the team Virendra can assist your business to adopt modern technologies to simplify business processes and enhance productivity. Let’s Talk.

Related Posts

Copyright © 2013 - 2024 Emizentech . All Rights Reserved. Privacy Policy

Top
whatsapp