Lightning Web Component Decorators Simplified

The Lightning Web Components programming model has three decorators that add functionality to property or function.

@api

To expose a public property or method, decorate it using @api

Example:

Create a Component(LWC) – decoratorLwc and add the following code:

import { LightningElement, api } from 'lwc';

export default class DecoratorLwc extends LightningElement {
    @api welcomeMessage;
}

In the above code block, we have decorated the property welcomeMessage with @api. We also have to import the api module to use the @api decorator.

@track

If a field’s value changes and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. 

If a field is assigned an object or an array, the framework observes some changes to the internals of the object or array, such as when you assign a new value.

To tell the framework to observe changes to the properties of an object, decorate the field with @track.

Example:

Update the decoratorLwc component with the following code.

import { LightningElement, track } from 'lwc';

export default class DecoratorLwc extends LightningElement {
    @track welcomeMessage = {"message" : "Hey!"};

    showWelcomeMessage() {
        this.welcomeMessage.message = 'Hey! Welcome to SalesforceBlue :)';
    }
}

<template>
    <lightning-card title="DecoratorLwc" >
        <p class="slds-p-horizontal_small">
            {welcomeMessage.message}
        </p>
        
            <lightning-button variant="brand" label="Click Me" title="label" onclick={showWelcomeMessage} slot="actions"></lightning-button>
        
    </lightning-card>
</template>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle> 

Add the above component to a lightning app page and observe the behavior on button click. You can see the updated message being displayed which would not be the case if we weren’t decorating the welcomeMessage property with @track.

To use @track decorator we have to import the track module.

@wire

To read Salesforce data, Lightning web components use a reactive wire service.

When the wire service provisions data, the component re-renders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.

We have covered them in detail in a separate post. Please go through them to understand the concepts in detail – Wire Services & Using Apex In LWC.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂