Design attributes in Lightning Web Components(LWC)

In Aura Framework, we were using <design:attribute> tag to create a design attribute. But in LWC we declare design attribute in the Component Configuration File (XML) with <targetConfigs> tag.

You need to defines the property in the component’s JavaScript class using the @api decorator.

So now let’s have a look at how you can create design attribute in LWC.

degine_inLWC.html

<template>
    <lightning-card title={cardTitle} icon-name="custom:custom14">
        <div>
            <p>  Hello , {firstName} </p>
        </div>
    </lightning-card>
</template>

degine_inLWC.js

Degine property in js file

import { LightningElement, api } from 'lwc';
export default class design_attribute_lwc_example extends LightningElement {
    @api firstName ='Salesforce Ohana!';
    @api cardTitle ='Welcome to Forceblogs.com';
}

degine_inLWC..js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>   
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
            <property name="cardTitle" type="String" default="Salesforce Ohana!" label="Enter the Card title"/>
            <property name="firstName" type="String" default="Welcome to Forceblogs.com" label="Enter the First Name"/>
        </targetConfig>
    </targetConfigs>
    
</LightningComponentBundle>

Related Resources :

• Lightning Web Components Basics