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

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-datatable > </ lightning-card > </ template > cmpOpportunityRecords.js import { LightningElement , api , wire , track } from 'lwc' ; import getOpportunity from '@salesforce/apex/cmpOpportunityRecordsCls.getOpportunity' ; export default class DevCmpShowRecords extends LightningElement { @ track columns =

LWC Life Cycle

Requirement : ‹ › LWC Life Cycle : Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle. LWC lifecycle contains the following phases: 1. constructor() 2. connectedCallback() 3. disconnectedCallback() 4. render() 5.renderedCallback() 6. errorCallback(error,stack) 1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called. First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute. 2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM. 3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM. 4. render(): render(

Lightning Web Component

Search This Blog