Data Binding in LWC

Learn how Data Binding works in Lightning Web Components (LWC) — the mechanism that keeps your JavaScript controller and HTML template in sync.

1. What is Data Binding?

Data binding in Lightning Web Components (LWC) is a mechanism that establishes a connection between the data in the JavaScript controller and the HTML template of a component. This connection allows the two parts of the component to stay synchronized, ensuring that changes in the data are reflected in the user interface, and vice versa.

Types of Data Binding in LWC:
• One-Way Data Binding — Data flows from JavaScript to the HTML template.
• Two-Way Data Binding — Data flows in both directions: from JS to HTML and from HTML back to JS.

2. Example 1 — One-Way Data Binding

In one-way data binding, a property defined in the JavaScript file is rendered in the HTML template using curly braces {propertyName}. When the property value changes in JavaScript, the UI automatically updates.

HTML Template:

<template>
    <lightning-card title="Data binding in LWC" icon-name="standard:topic">
        <div class="slds-p-around_medium">Hello, {message}!</div>
    </lightning-card>
</template>

JavaScript Controller:

import { LightningElement } from 'lwc';

export default class DataBindingExample extends LightningElement {
    message = "World";
}

• Here, when message is updated in JavaScript, the change will automatically be reflected in the template (User Interface).
• The output will display: Hello, World!

3. Is @track Mandatory for Two-Way Data Binding?

No, the @track decorator is not mandatory for two-way data binding in Lightning Web Components (LWC), but it can be necessary in certain situations.

Specifically, if you are working with data structures like Objects or Arrays, the @track decorator is necessary for LWC to detect changes within those structures and trigger UI reactivity.

Without @track, if you modify an internal property of the object (e.g., adding or changing a property), LWC may not detect the change and trigger a re-render.

4. Example 2 — Two-Way Data Binding with @track

In this example, user is an object with 2 properties: name and role. The @track decorator ensures the UI updates when the Object is updated. Without @track, the UI won't be updated with the input value.

HTML Template:

<template>
    <lightning-card title="Data binding in LWC" icon-name="standard:topic">
        <div class="slds-p-around_medium">
            <lightning-input label='What is your name?'
                value={user.name}
                onchange={handleChange}>
            </lightning-input>
            <p>{user.name} is a {user.role}</p>
        </div>
    </lightning-card>
</template>

JavaScript Controller:

import { LightningElement, track } from 'lwc';

export default class DataBindingExample extends LightningElement {

    @track user = {name: 'Alice', role: 'Salesforce Developer'};

    handleChange(event){
        this.user.name = event.target.value;
    }
}

• The value={user.name} binds the input field to the user.name property.
• The onchange={handleChange} listens for user input and updates the object.
• @track ensures LWC detects the nested property change and re-renders the UI.
• Output updates in real time: Satyam Parasa is a Salesforce Developer

5. One-Way vs Two-Way Data Binding

One-Way Data Binding:
• Data flows from JavaScript → HTML Template.
• Uses {propertyName} syntax in the template.
• UI updates automatically when the JS property changes.
• Best for displaying read-only data.

Two-Way Data Binding:
• Data flows in both directions — JS → HTML and HTML → JS.
• Uses value={property} + onchange={handler} together.
• Use @track when working with Objects or Arrays to detect deep changes.
• Best for interactive forms and user input.

6. Key Points to Remember

• In LWC, use {propertyName} (curly braces) in the HTML template to bind data — not double curly braces like in Aura.
• Primitive values (String, Number, Boolean) are reactive by default — no @track needed.
• Objects and Arrays require @track for LWC to detect internal property changes.
• Two-way binding requires both value binding and an event handler (e.g., onchange).
• Data binding keeps your JavaScript and UI always in sync without manual DOM manipulation.