Before starting with this lets understand with decorators<\/p>\n
<\/span>What is decorator?<\/span><\/h2>\nDecorator 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.
\n@track
\n@api
\n@wire<\/p>\n
<\/span>Reactive Properties<\/span><\/h2>\nIf 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.<\/p>\n
\n- Public properties<\/li>\n
- Private properties<\/li>\n<\/ul>\n
Also Read: Difference: Data Loader vs Import Wizard<\/a><\/h4>\n<\/span>Public Properties<\/span><\/h3>\nIn 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<\/p>\n
import { LightningElement, api } from 'lwc';<\/code><\/p>\nThese 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\u2019t change but it’s preferable that parent change and play with its value.<\/p>\n
![\"hire](\"\/blog\/wp-content\/uploads\/sites\/2\/2020\/05\/hire-salesforce-developers-1.png\")
<\/a><\/div>\n<\/span>Private Properties<\/span><\/h3>\nIn 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<\/p>\n
import { LightningElement, track } from 'lwc';<\/code><\/p>\nThese can be used by the component in which it is defined.<\/p>\n<\/div>\n
Let’s understand the difference between public and private with the help of an example.<\/strong><\/p>\nCreate a web component named parentEx.<\/p>\n
In parentEx.html<\/p>\n
<template>\r\n <lightning-card title='Properties'>\r\n Your Birthdate is : (Tracked property) : {inputDate} <br\/>\r\n <\/lightning-card>\r\n<\/template>\r\n<\/pre>\nparentEx.js<\/p>\n
import { LightningElement, api } from 'lwc';\r\n\r\nexport default class ParentEx extends LightningElement {\r\n @api inputDate = '13 December';\r\n \/\/ a non reactive property\r\n \/\/ dateVal = 'Date is : ';\r\n \r\n \r\n}\r\n<\/pre>\nCreate another web component named superParentEx. Leave its js file as it is.
\nIn superParentEx.html<\/p>\n
<template>\r\n Super Parent Example : \r\n <c-parent-Ex input-date='24 March (Set by parent )'><\/c-parent-Ex>\r\n<\/template>\r\n<\/pre>\nNow 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.<\/p>\n
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.<\/p>\n
For salesforce consulting<\/a> of your project get in touch with our team and hire us for salesforce development services<\/a>.<\/p>\nLearn More: How To Call Apex Method In Lightning Web Components<\/a> and How to Create a Salesforce Lightning Map Component?<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"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<\/p>\n","protected":false},"author":39,"featured_media":3020,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[87],"tags":[],"class_list":{"0":"post-2819","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-salesforce-development"},"modified_by":"emizentech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/How-to-use-Properties-In-LWC-min-1.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/How-to-use-Properties-In-LWC-min-1.jpg","author_info":{"display_name":"Virendra Sharma","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/salesforce"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=2819"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/3020"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=2819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=2819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=2819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n@track
\n@api
\n@wire<\/p>\n
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.<\/p>\n
- \n
- Public properties<\/li>\n
- Private properties<\/li>\n<\/ul>\n
Also Read: Difference: Data Loader vs Import Wizard<\/a><\/h4>\n
<\/span>Public Properties<\/span><\/h3>\n
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<\/p>\n
import { LightningElement, api } from 'lwc';<\/code><\/p>\nThese 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\u2019t change but it’s preferable that parent change and play with its value.<\/p>\n
<\/a><\/div>\n<\/span>Private Properties<\/span><\/h3>\n
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<\/p>\n
import { LightningElement, track } from 'lwc';<\/code><\/p>\nThese can be used by the component in which it is defined.<\/p>\n<\/div>\n
Let’s understand the difference between public and private with the help of an example.<\/strong><\/p>\n
Create a web component named parentEx.<\/p>\n
In parentEx.html<\/p>\n
<template>\r\n <lightning-card title='Properties'>\r\n Your Birthdate is : (Tracked property) : {inputDate} <br\/>\r\n <\/lightning-card>\r\n<\/template>\r\n<\/pre>\nparentEx.js<\/p>\n
import { LightningElement, api } from 'lwc';\r\n\r\nexport default class ParentEx extends LightningElement {\r\n @api inputDate = '13 December';\r\n \/\/ a non reactive property\r\n \/\/ dateVal = 'Date is : ';\r\n \r\n \r\n}\r\n<\/pre>\nCreate another web component named superParentEx. Leave its js file as it is.
\nIn superParentEx.html<\/p>\n<template>\r\n Super Parent Example : \r\n <c-parent-Ex input-date='24 March (Set by parent )'><\/c-parent-Ex>\r\n<\/template>\r\n<\/pre>\n
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.<\/p>\n
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.<\/p>\n
For salesforce consulting<\/a> of your project get in touch with our team and hire us for salesforce development services<\/a>.<\/p>\n
Learn More: How To Call Apex Method In Lightning Web Components<\/a> and How to Create a Salesforce Lightning Map Component?<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":39,"featured_media":3020,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[87],"tags":[],"class_list":{"0":"post-2819","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-salesforce-development"},"modified_by":"emizentech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/How-to-use-Properties-In-LWC-min-1.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/How-to-use-Properties-In-LWC-min-1.jpg","author_info":{"display_name":"Virendra Sharma","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/salesforce"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=2819"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/3020"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=2819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=2819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=2819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}