Custom Label in Lightning Web Components

In this post we will learn about how to use Custom Labels in Lightning Web Components (LWC) and how to Share Custom labels between Lightning Web Components? Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. We use custom labels to create multilingual applications. Let see how to access custom Label in Lightning Web Components.

Create Custom Labels

1. Go to setup, search for a custom label in the quick find box.
2. Create a custom label by clicking on New button.
3. Enter a value for the Description, Name, and Value field and click on save button.

Import Custom Label in LWC

To import a label in a Lightning Web Component, use @salesforce/label in an import statement

import labelName from '@salesforce/label/label-reference';

1. labelName: It is name that refers to the label in LWC.
2. labelReference: The name of the label in your org.

Custom Labels In Lightning Web Component(LWC) Example

Create lightning web component in your sandbox or developer org.

customLabelDemo.html

<template>
    <lightning-card  title={label.title} variant="narrow" icon-name="standard:opportunity">
        <p>{label.header}</p>
    </lightning-card>
</template>

• To use the labels in the template, use the same {property} syntax that you use to reference any JavaScript property

customLabelDemo.js

import { LightningElement } from 'lwc';
import header from '@salesforce/label/c.Header';
import title from '@salesforce/label/c.Title';
export default class CustomLabelDemo extends LightningElement {

    label = {
        header,
        title
    };
}

• Use import statement to get the label in Lwc.
• Then Expose the labels to use in the template using property

customLabelDemo.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>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result

Share Custom labels between Lightning Web Components

Now we know how to use custom label in lightning web components. What about if you have large list of labels and you want to to use in multiple LWC components? Let talk about best practice to import bulk custom label in LWC and how to create utility class to import same set of label in multiple Lightning web components.

You can create a utility component that imports all the labels and then exposes them bundled together in one object via a method. Then your main component will have a cleaner list of imports.

Step 1) Create Label Utility .

Create a Lightning web component that contains only a single Js file. Like below structure

labelUtility
   ├──labelUtility.js
   └──labelUtility.js-meta.xml

Lets create one common label Utility component.
labelUtility.js

import header from '@salesforce/label/c.Header';
import title from '@salesforce/label/c.title';

const label = {
    header: header,
    title: title
};

export {label};

• The module should only have a JS file & Metadata file in it, otherwise it will not work.
• Just like with any Lightning web component, the folder name and the filename must be identical
• Imports all the labels and then exposes them bundled together with export.

Step 2) How to use shared label Utility

Create new Lightning web component and import Js file with import statement like below

import { label  } from 'c/labelUtility';

Let see the full code.

import { LightningElement,track } from 'lwc';
import { label  } from 'c/labelUtility';
export default class CustomLabelDemo extends LightningElement {
    @track myLabel=label;
} 

• Import JS file with import

<template>
    <lightning-card  title={myLabel.title} variant="narrow" icon-name="standard:opportunity">
        <p>{myLabel.header}</p>
    </lightning-card>
</template>   

Please share your feedback and comment if there is any better way to implement or your like this post. If you want to learn about how to share Share CSS styles among Lightning Web Components check here.