Skip to main content

​
Overview

The helloBinding component demonstrates two-way data binding in Lightning Web Components. It shows how to update a component property when a user interacts with an input field, creating a dynamic and interactive user experience.

​
What It Does

This component displays a greeting message that updates in real-time as the user types in an input field. When the user changes the input value, the handleChange event handler updates the greeting property, which is reflected immediately in the displayed message.

​
Component Code

import { LightningElement } from 'lwc';

export default class HelloBinding extends LightningElement {
    greeting = 'World';

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

​
Key Concepts

  • Event Handling: The onchange event handler listens for changes to the input field
  • Reactive Properties: When greeting is updated, the template automatically re-renders
  • Two-Way Binding: The input field’s value is bound to greeting, and changes update the property
  • Event Object: The event.target.value provides access to the current input value

​
How It Works

  1. The input field displays the current value of greeting (initially “World”)
  2. When the user types in the input field, the onchange event fires
  3. The handleChange method updates greeting with the new input value
  4. The template reactively updates to show the new greeting message

​
Usage Example

To use this component in your Salesforce org: 
<c-hello-binding></c-hello-binding>
Try typing a name like “Alice” in the input field. The greeting will update to: 
Hello, Alice!

​
Source Code

View the complete source code on GitHub:

Build docs developers (and LLMs) love

Get started for freeTalk to us