@decorators in LWC

Exploring LWC Decorators

Please complete our LWC tutorial series Part 6 : ‘this’ variable

In this blog, we will be looking over how @decorators in LWC works. What are different types of decorators and how we can use them in our code?

So the question arises, What are decorators?

Decorators are simply functions that are prefixed with @symbol and placed immediately before the code being decorated.

@decoratorName decoratedCode; 

Decorators are just a clean syntax for wrapping a piece of code with another – literally “decorating it”.

It is a special kind of declaration that can be attached to a method or a property.

They are used to dynamically alter the functionality of method or property with which they are attached. 

Decorating a property

@decoratorName propertyName = 'SomeValue'; 

A property decorator is declared just before the property declaration. 

Decorating a method

@decoratorName
get methodName(){							
	//Return something;						
}

A method decorator is declared just before the method declaration.

There are more different types of decorators possible in ECMAScript but we are focusing the one’s needed in Lightning web components. 

So now, Let’s consider some of the key concepts which are required to understand the usage of decorators deeply.

Reactive / Non-reactive properties

  1. If the value of reactive properties changes, the component re-renders.
  2. If the value of reactive property changes, the component’s template re-renders any content that references the property.
  3. Use reactive property, only if necessary to re-render the component.
  4. Here, rendering is a process of transformation of components into DOM(Document Object Model) nodes that our browser can understand and display.

Public / Private properties

  1. Private property can only be used in the component where it is being defined.
  2. Public property is used when a parent component is updating the child component’s property and we need to re-render the child component.

Lightning web components have three unique decorators that add functionality to a property or method. They are limited to just LWC.

@track decorator

  1. It provides private property.
  2. It provides reactive property. 
  3. This decorator is used to make a private property which helps the template to re-render the component when the property value is changed.
  4. If we want to keep the track of the property’s value, we can declare it as @track. 

Usage of @track decorator
1. Import it explicitly from lwc.

import { LightningElement, track } from 'lwc'; 

2. Decorate the property using the @track syntax
3. Refer it inside the method to gather the event value.

import { LightningElement, track } from 'lwc';

export default class ReactiveProperty extends LightningElement {

    @track trackmessage = '';

    trackmethod(event){
        this.trackmessage = event.target.value;
        console.log(event.target.value);
    }

}

@api decorator

  1. It provides public property
  2. It provides reactive property
  3. Use this decorator to expose public property of a web component.
  4. Example to use the @api decorator
    Let’s create a web component (named : childWebComponent) which exposes a property named itemName with @api decorator thus making it public.
// childWebComponent.js
import { LightningElement, api } from 'lwc';   

export default class TodoItem extends LightningElement {

	@api itemName = 'New Item';

}
//childWebComponent.html
<template>
	<div class="view">
		<label>{itemName}</label>
	</div>
</template>

As we have already exposed our property itemName as public using @api, Let us see how we can set the value for this exposed property.

1. Initialize the property

a. As we have done in the above example.
NOTE: A component that declares a public property can set only its default value.

b. Do not change its value within the component, it can lead to undesirable results.

c. In our example, the c-child-web-component component can’t update the value of the itemName property in the childWebComponent.js

2. Using the Parent Component

a. We can include our child component i.e. childWebComponent in another parent component and set the component’s public property value.

b. This approach is very useful in communicating down the container hierarchy (no need to fire events).

c. Example

<!-- Parent.html -->
<template>
	<div class="listing">
		<c-child-web-component item-name="Milk"></c-todo-item>
		<c-child-web-component item-name="Bread"></c-todo-item>
	</div>
</template>
3. Using Query selector withing the parent web component a. use the query selector to query for child component over the parent component. for example,
// Parent.js
const myTodo = this.template.querySelector('c-child-web-component');
myTodo.itemName // New Item

@wire decorator

  1. It is reactive in nature.
  2. To read salesforce data, Lightning web components use a reactive wire service.
  3. To use the @wire service, we have to import it explicitly from lwc.
import { LightningElement, wire } from 'lwc';
While using the @wire to call the apex method, the apex method must always be annotated with @AuraEnabled(cacheable=true).
public class apexClassForWebComponent {
    
    @AuraEnabled(cacheable=true)
    public static string returnApexCallData(){
        return 'someThing'
    }

}

NOTE: Those apex method which are not cacheable=true can’t be called via @wire decorator.

Some of the important points regarding @wired decorators.

1. The data returned by apex method can’t be modified within the js file.
2. The refreshApex functioanality can only be used with @wire property or function.

Make sure to comment down below your reviews.

Till then,
Thanks for reading! & PEACE

(Visited 1,843 times, 2 visits today)

Leave a Reply