Skip to main content

LWC Decorators

Decorators :



In LWC decorators are used to add functionality to a property or function.

There are three types of decorators :
1. @track
2. @api
3. @wire

@track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared.

@api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared.
For ex : parent component can set the value of the properties in the child component.

@wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class.

LWC Properties :
There are two type of LWC properties.
1. Reactive Properties
2. Non-Reactive Properties

Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties.
1. Public properties  - Decorated with @api.
2. Private properties - Decorated with @track.

Non-Reactive Properties : Non-Reactive properties are declared without any decorators , so even if the value of the non-reactive properties changes component doesn't get re-render.

Other Useful Blog

Lightning Component

Happy Learning !!

Comments

Popular posts from this blog

LWC Update Single Record Datatable

Requirement : ‹ › Create a LWC in which get the contact records in Datatable and Update single record. Or in other words Update Single Record through Datatable. cmpDatatableUpdateSingleRecord.html < template >           < lightning-card   title = "Update Contact Record"   icon-name = "custom:custom63" >          < div   class = "slds-m-around_medium" >              < template   if:true = {contact.data} >                  < lightning-datatable                      key-field = "Id"                    ...

LWC Show Records In Table

Requirement : ‹ › Create a LWC component which will show the most recently created 10 Opportunity from the org and show them in table having Name , Close Date , Stage Name , Type and Create . or in other words Show Opportunity data in table format. cmpOpportunityRecords.html < template >      < lightning-card   title = "Opportunity Records"   icon-name = "standard:opportunity" >                  < lightning-datatable                            data = {data}                columns = {columns}                key-field = "Id" >          </ lightning-...