How to define design properties(attributes) in lightning web components

Hi ,

Whenever we want to provide the provision to set default values for the web components while including on different lightning page types then we use design properties. So to define design properties we have to use "@api" properties in Javascript file and we have to define design properties for the same in configuration file of lightning web component.
We can define design properties for different targets by using "targetConfig" .

Here i have configured for 2 targets
1) "lightning__AppPage"
 <targetConfig targets="lightning__AppPage">           
            <property name="title" type="string"/>
  </targetConfig>

2) "lightning__RecordPage"

 <targetConfig targets="lightning__RecordPage"> 
             <property name="title" type="string"/>         
            <property name="greeting" type="string"/>
     </targetConfig>

 The attribute "name" in <property> tag. This value must match the property name in the component’s JavaScript class.

You can define label also. It will be displayed as a label for the attribute in the tool.

Eg:
----
Calculator Example:
-----------------------
Html File:

<template>
    <lightning-card  title={title}>
        <lightning-button label="Submit" slot="actions" onclick={handleClick}></lightning-button>
        <p class="slds-p-horizontal_small">
            <lightning-input type="number" vaue={fNumber} name="fstNumber"  label="Enter First Number" onchange={handleChange} ></lightning-input>
            <lightning-input type="number" vaue={sNumber} name="scdNumber"  label="Enter Second Number" onchange={handleChange} ></lightning-input>
        </p>
        <p slot="footer">
            <b>{sum}</b>   
            <b>{greeting}</b>   
        </p>
    </lightning-card>
</template>

javascript File:
--------------------
import { LightningElement,track,api } from 'lwc';
import getSumResult from '@salesforce/apex/CalculateNumbers.getSummResult';
export default class Caclulate2Numbers extends LightningElement {
    @track fNumber;
    @track sNumber;
    @track sum;
    @track errors;
    @api title;
    @api greeting;   
    handleClick(){
        getSumResult({firstNumber:this.fNumber,secondNumber:this.sNumber})
        .then(result=>{
            this.sum = result;
        })
        .catch(error=>{
            this.errors = error;
        });
    }
    handleChange(event){
        if(event.target.name==='fstNumber'){
            this.fNumber = event.target.value;           
        }
        else if(event.target.name==='scdNumber'){
            this.sNumber = event.target.value;           
        }
    }
}

Meta File: (where we define design properties for @api variables declared in javascript)
------------
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>     
    </targets>   
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">            
            <property name="title" type="string"/>
        </targetConfig>
<targetConfig targets="lightning__RecordPage">  
             <property name="title" type="string"/>          
            <property name="greeting" type="string"/>
     </targetConfig>
    </targetConfigs> 
 
</LightningComponentBundle>

Notes:
Targets are mandatory before you define targets in <targetConfig>.

Output:
----------
While including in app page:
----------------------------------

While including in Record Page:
-------------------------------------

Reference:
https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC

https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_configuration_tags

Data Retrieval – imperative Apex method call

Hi,
Lightning web components can import methods from Apex classes. The imported methods are functions that the component can call either via @wire or imperatively.

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

Now our example is how to call a method imperatively. here is the code:

HTML:

<template>

    <lightning-datatable data={accountRecords} key-field="id" columns={columns}></lightning-datatable>

</template>

Javascript:

import { LightningElement,track } from 'lwc';

import getAccounts from '@salesforce/apex/AccountController.getAccountRecordsList';

export default class DataDisplayWithImperative extends LightningElement {

    @track accountRecords;

    @track errors;

    @track columns = [{label:'Name',fieldName:'Name',type:'text'},

    {label:'Industry',fieldName:'Industry',type:'text'},];

    connectedCallback(){

        getAccounts()

            .then(result=>{

                this.accountRecords = result;

            })

            .catch(error=>{

                this.errors = error;

            });

    }

}

Meta File:

---

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__Tab</target>

    </targets>

</LightningComponentBundle>

output:

------

References:

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

https://www.youtube.com/watch?v=QXUFapdVE2Y