Scribd
Upload
36 views

Decorators in LWC

Uploaded by

sairam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Decorators in LWC

Uploaded by

sairam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

#kb_sfdc_content

Content

 What is Decorators in LWC

 Types of Decorators

 @api with example

 @track with example

 @wire with example

#kb_sfdc_content
What is Decorators in LWC

 Decorators are annotations or patterns that allow us to modify or extend the behaviour of classes, methods,
or properties without changing their actual source code.

 Within the Lightning Web Component framework, decorators work hand-in-hand with JavaScript classes,
allowing for a closer connection with Salesforce’s core functionality.

 They’re like connectors, bridging the gap between your component and the larger Salesforce ecosystem.

#kb_sfdc_content
Types of Decorators In LWC

1) @api

2) @track

3) @wire

#kb_sfdc_content
1. @api

 To expose a public property or a public method, decorate with @api.

 Public properties are reactive, also known as public reactive properties since if a value of property
changes then component is re-rendered

 Public properties define API of a component whereas public methods are part of a component’s API

 A Component is re-rendered when the value of a referenced public property is modified or changed

 To pass data from parent component to child component, @api decorator in the child component exposes
a property by making it public so that parent component can update it @api properties can be exposed in
an App builder

#kb_sfdc_content
Example –

#kb_sfdc_content
#kb_sfdc_content
2) @track

 The @track decorator enables tracking of private reactive properties in Lightning Web Components.

 By decorating a private property with @track, the component becomes aware of changes to that
property’s value.

 Whenever a tracked property is modified, the component automatically rerenders to reflect the
updated value.

#kb_sfdc_content
Example –
3) @wire

 The @wire decorator is used to read Salesforce data and leverage reactive data fetching in Lightning Web
Components.

 By using @wire in the JavaScript class, a component can specify a wire adaptor or an Apex method to
fetch data from Salesforce.

 When the wire service provisions the data, the component automatically rerender to reflect the new data.

#kb_sfdc_content
#kb_sfdc_content
Example 

javascript
import { LightningElement, track } from 'lwc';

export default class ExampleComponent extends LightningElement {


@track greeting = 'Hello, Salesforce!';

handleChange(event) {
this.greeting = event.target.value;
}
}

#kb_sfdc_content
In this example:

- We import `LightningElement` and `track` from the `'lwc'` module.


- We define a class `ExampleComponent` that extends `LightningElement`.
- We declare a property `greeting` using the `@track` decorator. This property will be tracked for changes.
- In the `handleChange` method, whenever the value of an input field changes, we update the `greeting` property
accordingly.

#kb_sfdc_content
#kb_sfdc_content

You might also like