Decorators in LWC

 

The Lightning Web Components programming model has three decorators that add functionality to property or function. Decorators dynamically alter the functionality of a property or function.

There are mainly three decorators that we use in LWC.

@api:

     Public properties are reactive. If the value of public property changes, the component rerenders.

     To expose a public property, decorate a field with @api. Public properties define the API for a component.

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

·         import @api decorator from lwc

1	import { LightningElement, api } from 'lwc';

doItem.js

1 2 3 4 5

// todoItem.js import { LightningElement, api } from 'lwc'; export default class doItem extends LightningElement {     @api itemName = 'New Item'; }

todoItem.html

1 2 3 4 5

<!-- todoItem.html --> <template>     <div class="view">         <label>{itemName}</label>     </div>

todoApp.html

1 2 3 4 5 6 7

<!-- todoApp.html --> <template>     <div class="listing">         <c-todo-item item-name="Srinivas"></c-todo-item>         <c-todo-item item-name="Lakshmi"></c-todo-item>     </div> </template>

 

@track

Fields are reactive. 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.

There is one use case for @track. When a field contains an object or an array, there’s a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track

Import @api decorator from lwc.

helloWorld.html

1 2 3 4 5 6 7 8

<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

1 2 3 4 5 6 7

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

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

1	import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodRef';

 We can call the apex class in  Lightning web component using these different ways:

• Wire a property
• Wire a function
• Call a method imperatively