Decorators in Lightning Web Components (LWC)

Lightning Web Components (LWC) use decorators to modify or enhance the behavior of JavaScript functions and properties dynamically. These decorators help in managing the flow of data between components and provide reactive properties.

What are Decorators in Lightning Web Components?

A Decorator is a design pattern in JavaScript that allows adding extra functionality to objects dynamically. In Lightning Web Components (LWC), decorators are used to define properties and methods with special behaviors. They are part of the ECMAScript standard and help developers manage data flow, component reactivity, and API exposure.

Types of Decorators in Lightning Web Components

LWC provides three main decorators:

1. @api – Exposes public properties and methods.
2. @track – Tracks private properties for reactivity.
3. @wire – Connects components to Salesforce data.

Let’s explore each of them in detail.

Launch your Salesforce career with our hands-on Salesforce Online Training, featuring real-world projects and job-ready skills. Sign up now for a free demo session..!

1. @api Decorator

The @api decorator exposes a public property or method of a Lightning Web Component. These public properties are reactive, meaning if their value changes, the component re-renders.

Key Features of @api:

• It defines the public API of a component.
• Reactivity: The component re-renders when the property value changes.
• Parent-to-child data communication: A parent component can pass data to a child component via @api.
• @api properties can be exposed in App Builder.

Example: Passing Data from Parent to Child Component

Child Component – apiDecoratorSampleChildComponent

HTML (apiDecoratorSampleChildComponent.html)

<template>
    <lightning-card title="Child Component">
        <div class="slds-p-around_medium">
            <p class="slds-p-horizontal_small">{message}</p>
        </div>
    </lightning-card>
</template>

JavaScript (apiDecoratorSampleChildComponent.js)

import { LightningElement, api } from 'lwc';
export default class ApiDecoratorSampleChildComponent extends LightningElement {
    @api message;
}

Explanation: The child component has a public message property decorated with @api, making it accessible from a parent component. The message is displayed inside a <p> tag. When the parent updates this property, the child component reflects the change automatically.

Parent Component – apiDecoratorSampleParentComponent

HTML (apiDecoratorSampleParentComponent.html)

<template>
    <c-api-decorator-sample-child-component message="Message From Parent Component!!"></c-api-decorator-sample-child-component>
</template>

JavaScript (apiDecoratorSampleParentComponent.js)

import { LightningElement } from 'lwc';
export default class ApiDecoratorSampleParentComponent extends LightningElement {}

Explanation: The parent component <c-api-decorator-sample-child-component> passes a string "Message From Parent Component!!" to the child’s message property. This value is then displayed in the child component dynamically.

2. @track Decorator

The @track decorator is used to track private properties inside a component. Before Spring ’20 release, @track was required for reactivity, but now all properties in an LWC are reactive by default.

Key Features of @track:

• Used for private reactivity (only within the component).
• Works with objects and arrays, detecting changes to their properties.
• From Spring ’20, all fields are reactive by default.

Example: Tracking Private Property Changes

HTML (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>

JavaScript (helloWorld.js)

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greetingMessage = 'World';
  changeHandler(event) {
    this.greetingMessage = event.target.value;
  }
}

Explanation: The greetingMessage property is initialized with "World". The changeHandler updates this property based on user input. The component re-renders automatically, displaying the updated message.

3. @wire Decorator

The @wire decorator is used to fetch Salesforce data in LWC components reactively. It allows a component to retrieve data from an Apex method and automatically re-renders when the data changes.

Key Features of @wire:

• Fetches Salesforce data using Apex methods.
• Reactive: The component updates automatically when the data changes.
• Supports property-based or function-based wire services.

Syntax:

import <methodName> from '@salesforce/apex/<Namespace.ApexClassName.apexMethod>';
@wire(methodName, { methodParams }) 
propertyOrFunction;

Explanation: The @wire decorator connects to an Apex method, retrieves data, and assigns it to a property. The component re-renders when the data changes.

Example: Fetching Contacts from Apex Class

HTML (displayContacts.html)

<template>
    <lightning-card title="Contacts" icon-name="standard:contact_list">
        <div class="slds-m-around_medium">
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="con">
                    <p key={con.Id}>{con.Name}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

JavaScript (displayContacts.js)

import { LightningElement, wire } from 'lwc';
import getContactsList from '@salesforce/apex/ContactsService.getContacts';
export default class DisplayContacts extends LightningElement {
    @wire(getContactsList)
    contacts;
}

Explanation: The @wire decorator fetches contact records from the getContactsList Apex method. The retrieved data is iterated in the template using <template for:each>, displaying each contact’s name dynamically.

Conclusion

Decorators in Lightning Web Components (LWC) help define reactive properties and enable seamless communication between components.

• @api: Exposes public properties and allows parent-child communication.
• @track: Tracks private properties for component reactivity.
• @wire: Fetches Salesforce data reactively from an Apex method.
  Using these decorators efficiently enhances LWC performance and makes it easier to manage data flow within the Salesforce ecosystem.

Salesforce Training in Florida – Accelerate Your Career Today!

Designed for a deep, immersive learning experience, our Salesforce training equips you with the skills to succeed in the CRM industry. Covering Salesforce Admin, Developer, and AI domains, the program combines theoretical knowledge with practical, real-world applications. Through industry-relevant projects and assignments, you’ll tackle complex business challenges with Salesforce solutions. Guided by expert instructors, you’ll enhance your technical skills and deepen your understanding of the CRM ecosystem.

Our Salesforce training in Florida, offers personalized mentorship, expert interview coaching, and comprehensive certification exam preparation to help you excel in the competitive job market. With hands-on project experience, detailed study materials, and continuous guidance, you’ll build confidence and expertise to secure top certifications and demonstrate practical skills that employers value. Start your Salesforce journey today and unlock exciting career opportunities!

Take the first step toward a thriving Salesforce career—sign up for a FREE demo session today..!