Introduction
Lightning Web Components (LWC) is Salesforce’s modern UI framework built on web standards. One of the core features of Salesforce LWC is the use of decorators, which provide metadata to a class, method, or property, controlling its behavior within the component.
Decorators simplify coding by adding specific functionality in a declarative manner.
In this blog post, we’ll explore the most commonly used decorators in LWC:
-
- @api,
- @track,
- @wire.
Each decorator plays a distinct role, and understanding them is essential for efficient LWC development.
1. @api Decorator
The @api decorator in LWC is used to expose public properties or methods of a child component to its parent component.
It is always applied in the JavaScript file of the Child Component, enabling the Parent LWC Component to access and interact with those properties or methods present in Child LWC Component.
Using @api decorator, you can:
- Expose Public Properties
- Expose Public methods
Example: Exposing Public Properties
Javascript:
// childComponent.js
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api title; // Public property
}
Html
<!-- childComponent.html -->
<template>
<h1 id="title" class="rb-heading-index-3">{title}</h1>
</template>
Html
<!-- parentComponent.html -->
<template>
<c-child-component title="Hello from Parent"></c-child-component>
</template>
Explanation:
Remember : @api keyword is always used in Child Component.
The title property in the child component is decorated with @api, allowing it to be set from the parent component.
Example: Exposing Public Methods
Javascript
// childComponent.js
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api showAlert(message) {
alert(message);
}
}
Javascript
// parentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleClick() {
this.template.querySelector('c-child-component').showAlert('Hello from Parent!');
}
}
Html
<!-- parentComponent.html -->
<template>
<c-child-component></c-child-component>
<button onclick={handleClick}>Trigger Child Alert</button>
</template>
Explanation:
The showAlert method in the child component is invoked by the parent component.
Checkout the post below to learn more about @api Decorator in Salesforce LWC, complete with examples.
2. @track Decorator
@track decorator in Lightning Web Component monitors / tracks the changes to private properties of objects and arrays within a component.
They are also called as – Private Reactive Properties.
When a tracked property is modified, the component automatically re-renders to reflect the updated value.
Example: Reactive Properties
Javascript
// trackExample.js
import { LightningElement, track } from 'lwc';
export default class TrackExample extends LightningElement {
@track user = {
firstName: 'John',
lastName: 'Doe',
};
handleUpdate() {
this.user.firstName = 'Jane';
}
}
Html
<!-- trackExample.html -->
<template>
<p>{user.firstName} {user.lastName}</p>
<button onclick={handleUpdate}>Update Name</button>
</template>
Explanation:
The user object is decorated with @track. When firstName is updated, the DOM reflects the change automatically.
Checkout the post below to learn more about @track Decorator in Salesforce LWC, complete with examples.
3. @wire Decorator
The @wire decorator is used to read Salesforce data or invoke Apex methods. It works with Salesforce’s Lightning Data Service (LDS) to fetch or interact with data declaratively.
Example: Fetching Salesforce Data
// wireExample.js
import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
export default class WireExample extends LightningElement {
@wire(getRecord, { recordId: '001XXXXXXXXXXXXXXX', fields: ['Account.Name'] })
account;
get accountName() {
return this.account.data ? this.account.data.fields.Name.value : '';
}
}
Html
<!-- wireExample.html -->
<template>
<p>Account Name: {accountName}</p>
</template>
Explanation:
The @wire decorator fetches the account record data and automatically updates the account property when the record changes.
Checkout the post below to learn more about @wire Decorator in Salesforce LWC, complete with examples.
Combining Decorators
You can combine decorators to build more complex components. For example:
Example: Using @api and @wire
Javascript
// accountComponent.js
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = ['Account.Name', 'Account.Phone'];
export default class AccountComponent extends LightningElement {
@api recordId; // Exposed property for the parent to pass recordId
@wire(getRecord, { recordId: '$recordId', fields: FIELDS }) account;
get accountName() {
return this.account.data ? this.account.data.fields.Name.value : 'No Name';
}
get accountPhone() {
return this.account.data ? this.account.data.fields.Phone.value : 'No Phone';
}
}
<!-- accountComponent.html -->
<template>
<p>Account Name: {accountName}</p>
<p>Account Phone: {accountPhone}</p>
</template>
Explanation:
The recordId is exposed as a public property using @api, and the @wire decorator fetches the account data.
Conclusion
Decorators in LWC are powerful tools for managing the flow of data and reactivity in your components. Here’s a quick recap:
- @api: Exposes properties and methods present in Child component to Parent component.
- @track: Makes properties reactive for internal changes.
- @wire: Fetches data or calls Apex methods declaratively.
By mastering these decorators, you can build dynamic, efficient, and maintainable Lightning Web Components that seamlessly integrate with Salesforce’s ecosystem.
