Lightning Web Components comprises of three decorators which are used for passing data or functionality to a property/method and vice versa between a single component and multiple components. The components may or may not be in hierarchy depending upon the type of architecture.
Following are the type of decorators in Lightning Web Components:
1. @api - Properties or functions which are used in LWC are public reactive. Whenever property value changes, the component re-renders. If a public property has to be defined, it would be decorated with @api. The property defined in the child component can be used in the parent component to pass data using dispatch event.
Snippet:-
Sample.js
import {LightningElement, api} from 'lwc';
export default class SampleComp extends LightningElement {
@api samplePropertyName = 'sample Value';
@api samplePropertyName = 'Sample';
}
Sample.html
<template>
<div class="view">
<label>{samplePropertyName}</label>
</div>
</template>
2. @track - Properties which are denoted with track decorator are called as private reactive property which means we can use the property in that component only and it cannot be exposed to its parent or any other component. This is used in case of list of object or an array. When we want to re-render the component upon change of any value in object list or in array.
Snippet:-
Sample.js
import {LightningElement, track} from 'lwc';
export default class SampleComp extends LightningElement {
@track samplePropertyName = 'Sample Value';
changeHandler(event){
this.samplePropertyName = event.target.value;
}
}
Sample.html
<template>
<div class="slds-m-around_medium">
<p>Welcome, {samplePropertyName}!</p>
<lightning-input label="Name" value={samplePropertyName} onchange={changeHandler}></lightning-input>
</div>
</template>
3. @wire - Properties which are denoted with wire decorator are used for reading Salesforce data, and are reactive in nature. Whenever wire service furnishes data, the component re-renders. We need to import the @salesforce/apex scoped module into JavaScript controller class.
Snippet:-
Sample.js
import {LightningElement, wire} from 'lwc';
import apexMethod from '@salesforce/apex/SampleClass.getListOfAccounts';
export default class ChildComp extends LightningElement {
@wire(getListOfAccounts) accountsList;
}
}
SampleApex.cls
public with sharing class SampleClass {
@AuraEnabled(cacheable=true)
public static List<Account> getListOfAccounts() {
return [SELECT Id, Name FROM Account];
}
}
Sample.html
<template>
<lightning-card title="Sample Accounts From Apex Class Using Wire Property" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={accountsList.data}>
<template for:each={accountsList.data} for:item="acc">
<p key={acc.Id}>{acc.Name}</p>
</template>
</template>
<template if:true={accountsList.error}>{accountsList.error}</template>
</div>
</lightning-card>
</template>
Note: For more information. Please add comments and for more please reach out to us through chat or share your queries here.