#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