September 20, 2023

Decorators in LWC

1-  @track

• private property used for same component where it is declared.
• is used to display the value when it changes within the same component.
• contains an object or an array, tells the framework to observe changes to the properties of an object or elements of an array.
• Spring ’20 it is not required

helloWorld.html

<template>
<lightning-card title="Hello World" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
        <p>Hello, {greetingMessage}!</p>
        <lightning-input label="Name" value={greetingMessage} onchange={changeHandler}></lightning-input>
    </div>
</lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  //@track greetingMessage = 'World';//Before Spring ’20 to need to import track decorator & use it to make a field reactive
  greetingMessage = 'World';


  changeHandler(event) {
       this.greetingMessage = event.target.value;
  }
}

2- @api

• public property used for cross component.
• is to make a public reactive property.
• generally used when sending data from parent to child component and redirecting from one to another component

** examples of api decorators are in the next posts.

3- @wire

• To call Apex Class.
• Reactive service based of LDS
• @wire service read data either from LDS or Apex

import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

4- get

• property always return a value

get Name(){
     return 'Hello World';
}

5- set

• sets value to an attribute

set productId(value) { 
    this.productId = value; 
}

Common Interfaces used in JS-meta.xml

Common Input Types in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments