Showing posts with label How to access custom labels In Lightning Web Component?. Show all posts
Showing posts with label How to access custom labels In Lightning Web Component?. Show all posts

Sunday, May 22, 2022

How to access custom labels In Lightning Web Component?

 We import label using  @salesforce/label scoped module. 

Syntax:

import labelName from '@salesforce/label/labelReference';

Where,

labelName—A name that refers to the label.

labelReference—The name of the label in your org in the format namespace.labelName.


Let us understand with the below example,

Create 2 label as shown below.




custom labels In Lightning Web Component


custom labels In Lightning Web Component

customLabelLWC.html

<template>

    <lightning-card title={label.lightningcardname}>

     <lightning-button label={label.buttonnamefromcustomlabel}> </lightning-button>

    </lightning-card>

</template>


  customLabelLWC.js

import { LightningElement } from 'lwc';

import lightningcardname from '@salesforce/label/c.lightningcardname';

import buttonnamefromcustomlabel from '@salesforce/label/c.buttonnamefromcustomlabel';

export default class CustomLabelLWC extends LightningElement {

label ={lightningcardname,buttonnamefromcustomlabel}

 }

customLabelLWC.js-meta.xml

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

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

    <apiVersion>54.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>


Now, add this component to Account page to see the result.

How to access custom labels In Lightning Web Component?