Defining a Property in Lightning Web Component

Hi ,

I am going to explain a simple example about a property and render the value of it on HTML file of lightning web component.

As we know we have three main files required for any lightning web component. Those are
HTML ,Javascript,Meta files.

Lets have a simple Helloworld example:

When you create lightning web component with the name "helloworld" it creates the Lightning Web Component bundle with three basic required files as shown below.

Let's write a simple html markup in
"helloworld.html". Here <template> is root tag always.

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

Let's define property "greeting" with @track decorator in java script file "helloworld.js"

import { LightningElement, track } from 'lwc';

export default class HelloWorld extends LightningElement {

    @track greeting = 'World';

    changeHandler(event) {

        this.greeting = event.target.value;

    }

}

here "@track" decorator makes your property reactive and render the changes on html file

in java script we have one property "greeting" with "@track" decorator and one function "changeHandler" where we set the value to property for any change from "lightning-input".

Now  let's look at meta file (configuration file): 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>

In meta file we can maintain the configurations of Lightning Web Components.
The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.

Here we have the following things:
<apiVersion> :A double value that binds the component to a Salesforce API Version.

<isExposed> : It can be used to expose our component to App Builder or Community Builder.
If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder.
To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page.

<targets>:
Specifies where the component can be added, such as on a type of Lightning Page or in Embedded Service Chat. If you want your component to appear in the Lightning App Builder or in Community Builder, specify at least one Lightning page type.

Here our component exposed to "App page,Record Page,Home Page" of App Builder.

Output:

Whatever we type in input it immediately renders to "greeting" property because "@track" decorator.

Reference:
https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A
https://developer.salesforce.com/docs/component-library/documentation/lwc