Scribd
Upload
68 views5 pages

Decorators LWC

The document discusses three decorators in Lightning Web Components (LWC): @api, @track, and @wire. @api is used to expose public properties and methods, @track makes fields reactive for internal component use, and @wire facilitates reading Salesforce data reactively. Each decorator has specific import requirements and usage guidelines to enhance component functionality.

Uploaded by

pribgv.sf
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
68 views5 pages

Decorators LWC

The document discusses three decorators in Lightning Web Components (LWC): @api, @track, and @wire. @api is used to expose public properties and methods, @track makes fields reactive for internal component use, and @wire facilitates reading Salesforce data reactively. Each decorator has specific import requirements and usage guidelines to enhance component functionality.

Uploaded by

pribgv.sf
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/ 5

Decorators in LWC

Decoratrors in LWC
DHANANJAY AHER

👾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.

👿@api: To expose a public property, decorate a field with @api. Public


properties define the API for a component.Public properties are reactive. If the
value of public property changes, the component rerenders.

To expose a public method, decorate it with @api. Public methods are part
of a component’s API. To communicate down the containment hierarchy,
owner and parent components can call JavaScript methods on child
components.

To use @api we have to import it first from lwc.


Import @api decorator from lwc
This is a child component named as abcss

Now if we call this from other lwc component like below

and if you run parentComp.html then the output would be simply


But in abcss child comp we have @api attribute so we can change it from
dhananjayParentCom like this:

output is :

👿@track : If a field’s value changes, and the field is used in a template or


in a getter of a property that’s used in a template, the component rerenders
and displays the new value. If a field is assigned an object or an array, the
framework observes some changes to the internals of the object or array,
such as when you assign a new value.To tell the framework to observe
changes to the properties of an object, decorate the field with @track.

Note: we can't access @track properties from outside as they are private and
only accessible within its component only.

Import @track decorator from lwc:


Note: You can use "tellMe" variable without @track but is always recommended
to use @track in case you are showing variable in html as it make it reactive so
whenever it changes in js the changes will also be visible in html.

👿@wire:To read Salesforce data, Lightning web components use a


reactive wire service. When the wire service provisions data, the component
rerenders. Components use @wire in their JavaScript class to specify a wire
adapter or an Apex method.

We need to import the @salesforce/apex scoped module into JavaScript


controller class.

Here is list of important point of importing apex method:

apexMethodName : An imported symbol that identifies the Apex method.


apexMethodReference : The name of the Apex method to import.
Classname : The name of the Apex class.

Namespace—The namespace of the Salesforce organization. Specify a


namespace unless the organization uses the default namespace (c), in which case
don’t specify it.

Example :
Apex Class :

Note: ApexMethod should be annotated with @AuraEnabled and if you


use cacheable=trueyou can't mutate data in your apex method.

Source : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators

You might also like