Usage of Design Attributes in Lightning Web Components

In my previous post, I have told you about how to navigate in the Lightning Web Components, now I’m going to tell you how to use Design Attributes in Lightning Web Components.

What is design attributes in Salesforce Lightning Framework?

When we need to expose an attribute of the component to the end user so that he can change/update the value of the component in builder tools like the Lightning App Builder, Community Builder, or Flow Builder. 

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.

design_attribute_lwc_example.html

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

design_attribute_lwc_example.js

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

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