About .js-meta.xml file in LWC

parentcmp.html
<template>
    Value passed using Appbuilder(Design attributes) = {daName}
  <c-child-cmp childvar={passval}></c-child-cmp>  
</template>
parentcmp.js
import {
    LightningElement,api
} from 'lwc';

export default class ParentCmp extends LightningElement {
    @api daName;
    passval= {
            name: 'Manju',
            age: 29
        };    
}
parentcmp.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>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
            <property label="name" name="daName" required="false" type="String" default="Hello" description="Please pass name in this DA">
            </property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
Here,
xmlns  
Is a namespace, which contains working details of the tag " LightningComponentBundle".

IsExposed
Mark true in below 2 cases:
a. To use this component in Appbuilder.
b. From a managed package in Aura.

taretConfig:
Inside this tag, if we want to specify which page to which object. Then we will use its subtags.
Like 
<object>
<property> - This is to define Design attributes to collect data from app builder or screen flows, etc. In our example, "daName" is a js property and we are configuring from app builder. Make sure JS property and "name" attribute value of the "property" tag are the same (I have highlighted in yellow colour).

For more details: ClickHere

Comments