Concepts or coding lessons of Salesforce that you can implement easily

Decorators in LWC

 There are 3 decorators in LWC that add functionality to property or function.

@api

To expose a public property, decorate it with @api. Public properties are reactive. If the value of reactive property changes, the component rerenders.


@track

To track a private property`s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also private reactive properties.

This @track decorator is No Longer Required for LWC


@wire

Components use @wire in there Javascript class to specify a wire adaptor or an apex method


For example: Demo.html

<template>
    <lightning-card title="Property Demo" icon-name="custom:custom54">
        <div>
            <lightning-input value={msgApi}
                label="Private property"
                onchange={handleChange}></lightning-input>
                <div>
                    Message is : {msgApi}
                </div>
        </div>
    </lightning-card>
</template>

Demo.js

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

export default class Demo extends LightningElement {
    @track message = "Reactive property";

    @api msgApi = "API property";

    handleChange(event){
        this.msgApi= event.target.value;
    }
}