You might have got familiar with JavaScript properties in Lightning Web Component. Let’s assume a scenario where you have to dynamically calculate some value or validate the value of the property before assigning it. Here comes the getter in Lightning Web Component to rescue you from situations to dynamically compute a value.
When you should use getter in Lightning Web Component?
To answer this question, Let’s take a simple example. We have two input fields of type number in the HTML file of the Lightning Web Component. Our aim is to dynamically calculate the sum of the entered value in those two number input field. We can make use of getter function to do so.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Definition of getter
The getter function always start with get and you can give any name to the getter function.
get anyName() { ... }How to access the getter in HTML?
You can treat getter function as same as JavaScript properties in Lightning web Component. The way you access the properties in HTML, You can access getter in the same way.
{anyName}When does getter fires?
You might have heard of the lifecycle hooks in Lightning Web Component. If yes, Most probably you would know when do they trigger, but what about getter function? When do they fire?
It will fire in two case:-
- If you access a getter on the HTML
- If you refer the getter in JavaScript methods or properties in Lightning Web Component.
Where does getter stands in lifecycle hooks?
The getter function always executes after constructor and connectedCallback fires in the lifecycle Hooks. Let’s have a look in below image from Trailhead Playground:-
The getter functions will re-evaluate itself each time the property value changes which are referenced in it.
Implementation of getter function in Lightning Web Component
Let’s create a Lightning web Component with name lightningGetter. Any Lightning Web Component created will have three files. They are:-
- lightningGetter.html
- lightningGetter.js
- lightningGetter.js-meta.xml
We are going to implement the use case we discussed at the very beginning.
lightningGetter.html
We have two lightning-input field of type number. They will have their change handler defined in markup and handled in JS file of the Lightning Web Component. The sum of the number will be dynamically calculated in JS by getter function and the result will be shown on the UI.
<template>
<lightning-input type="number" name="input1" onchange={handleChange} label="Enter first number" ></lightning-input>
<lightning-input type="number" name="input2" onchange={handleChange} label="Enter second number" ></lightning-input>
<b>The sum of Numbers are {sumOfTwoNumber}</b>
</template>lightningGetter.js
The onchnage handler of the lightning-input fields assign the values to properties defined in it. Getter function with name sumOfTwoNumber compute the sum of those two properties dynamically. Before assigning a value to getter property, We have validated the properties having values entered in the input field weather they are not null or undefined.
import { LightningElement } from 'lwc';
export default class LightningGetter extends LightningElement {
//defining js properties
firstNumber;
secondNumber;
//The onchnage handler of the number input fields
handleChange(event){
if(event.target.name==='input1'){
this.firstNumber = event.target.value;
}else if(event.target.name==='input2'){
this.secondNumber = event.target.value;
}
}
get sumOfTwoNumber(){
//parseInt Converts a string to an integer.
if(this.firstNumber && this.secondNumber){
return parseInt(this.firstNumber)+parseInt(this.secondNumber);
}
}
}lightningGetter.js-meta.xml
The meta xml file has the metadata of the component. You can define things like where you can use component in the Salesforce. We have exposed it to Lightning Record page, Home page and App page.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>Its time to add the component on the Lightning Page and validate the results.
So cool….