Decorators in Lightning Web Component

|
| By Webner

The Lightning Web Component has three decorators.

  1. @api
  2. @track
  3. @wire



@api: If we want to pass any variable from Parent component to child component then we use @api decorator. To pass data to the child component, we need to define a variable with @api decorator in the child component to be public and accessed from the parent component. @api uses for public properties in LWC.

@api decorator Example –

  1. Import @api decorator in Js file of Lwc.
    import { LightningElement, api } from 'lwc';
    Without importing @api decorator we can not use @api decorator in LWC.
  2. Create any variable with @api decorator in LWC.
    <!– childItem.JS –>
    import { LightningElement, api } from 'lwc';
    export default class childItem extends LightningElement {
    @api itemName = 'New Item';
    }
  3. Use variables in the html file of LWC.
    <!-- childItem.html -->
    <template>
    <div class="view">
    <label>{itemName}</label>
    </div>
    </template>
    We can also use this ‘itemName’ variable in another app or Parent component.
    Ex-
    <!-- ParentApp.html -->
    <template>
    <div class="listing">
    <c-child-item item-name="Milk"></c-child-item>
    <c-child-item item-name="Bread"></c-child-item>
    </div>
    </template>

    @track: If we want to change any value of a field on click of button then in this case we will have to create a variable with @track decorator. @track decorator uses for private properties only. We cannot access variable with @track decorator in another Lightning web component.
    @track example –
    helloWorld.html
    <template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
    <p>Hello, {greeting}!</p>
    <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
    </div>
    </lightning-card>
    </template>

    helloWorld.js
    import { LightningElement } from 'lwc';
    export default class HelloWorld extends LightningElement {
    greeting = 'World';
    changeHandler(event) {
    this.greeting = event.target.value;
    }
    }

    helloWorld.js-meta.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    </targets>
    </LightningComponentBundle>

@wire: @wire decorator uses for reading the salesforce data. Suppose we want to show the list of all accounts in our lightning web component then for accessing all salesforce data in our lightning web component we will use @wire decorator.
We need to import the @salesforce/apex scoped module into the JavaScript controller class.
import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

Here is a list of the important points of importing the 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 of @wire –

Apex class AccountHelper
public with sharing class AccountHelper {
@AuraEnabled(cacheable=true)
public static List<Account> getAccountList() {
return [SELECT Id, Name, Type, Rating, Phone
FROM Account];
}
}

accountListLWC.js –
import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class AccountListLWC extends LightningElement {
@wire(getAccountList) accounts;
}

accountListLWC.html –
<template>
<lightning-card title="Account List From Apex" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={accounts.data}>
<template for:each={accounts.data} for:item="acc">
<p key={acc.Id}>{acc.Name}</p>
</template>
</template>
<template if:true={accounts.error}>
{accounts.error}
</template>
</div>
</lightning-card>
</template>

accountListLWC.js-meta.xml –
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Leave a Reply

Your email address will not be published. Required fields are marked *