What are Decorators in Lightning Web Component (LWC)?

What are Decorators in Lightning Web Component (LWC)?

The Lightning Web Components programming model has three decorators that add functionality to a property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.
Decorators are often used in JavaScript to modify the behavior of a property or function.
To use a decorator, import it from the lwc module and place it before the property or function.

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

Type of Decorators in Lightning Web Component

There are three types of Decorators in Lightning web components.

1. Api
2. Track
3. Wire

1. @api :

Marks a field as public. Public properties define the API for a component. A user that uses the component in its HTML markup can access the component’s public properties.
All public properties are reactive, which means that the framework observes the property for changes. When the property’s value changes, the framework reacts and rerenders the component.

2. @track :

Tells the framework to observe changes to the properties of an object or to the elements of an array. If a change occurs, the framework rerenders the component.
All fields are reactive. If the value of a field changes and the field is used in a template—or in the getter of a property used in a template—the framework rerenders the component.
You don’t need to decorate the field with @track. Use @track only if a field contains an object or an array and if you want the framework to observe changes to the properties of the object or to the elements of the array. If you want to change the value of the whole property, you don’t need to use @track.

3. @wire :

Gives you an easy way to get and bind data from a Salesforce org.
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 adaptor or an Apex method.

Here’s an example of using the @api decorator to render a value from one component (parent) to another component (child). The file structure looks like this:

do you know what is Modal/Popup in Lightning Web Component(LWC)? Modal/Popup in LWC

Use of @api

parent.html

<!-- parent.html -->
<template>
    <div class="lds-box slds-theme_shade slds-theme_alert-texture" style="padding-left: 15px;">
        <c-child child={child}></c-child>
    </div>
</template>

parent.js

import { LightningElement } from 'lwc';
export default class Parent extends LightningElement {
    child = 'From Parent to child.';
}

parent.js-meta.xml

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

child.html

<!-- child.html -->
<template>
    <div class="lds-box slds-theme_shade slds-theme_alert-texture" style="height: 40px;width: 1000px;">
         <p>{child}</p>
    </div>
</template>

child.js

import { LightningElement,api } from 'lwc';
export default class Child extends LightningElement {
    @api child;
}

child.js-meta.xml

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

output:

For any Queries/doubts comment below and for quick responses connect on LinkedIn and Twitter.