Bind Data in a Template

Bind data using a property in a component’s template to a property in the component’s JavaScript class.

In the template, surround the property with curly braces without spaces: {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. In the template, the property can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). LWC doesn’t allow computed expressions like person[2].name['John'].

A property used in a template should contain a primitive value, except when used in a for:each or iterator directive.

Example: Bind Component Template Properties to JavaScript Properties

To follow along in a code editor, open the hello, helloBinding, and helloExpressions components from the github.com/trailheadapps/lwc-recipes repo. You can also copy the code to a StackBlitz LWC playground.

Here’s the simplest example of data binding. The greeting property in the template is bound to the greeting property in the JavaScript class.

1<!-- hello.html -->
2<template> Hello, {greeting}! </template>

1// hello.js
2import { LightningElement } from "lwc";
3
4export default class Hello extends LightningElement {
5  greeting = "World";
6}

The property in { } must be a valid JavaScript identifier or member expression. For example, {data} and {data.name} are both valid. Don’t add spaces around the property, for example, { data } is not valid HTML.

Instead of a hard-coded string, this component has an input field that asks for a name to greet.

The lightning-input field uses the onchange attribute to listen for a change to its value. When the value changes, the handleChange function in the JavaScript file executes. Notice that to bind the handleChange function to the template, we use the same syntax, {handleChange}

1<!-- helloBinding.html -->
2<template>
3  <p>Hello, {greeting}!</p>
4  <lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>
5</template>

We talk about event handling in-depth in another topic, but notice in the JavaScript class that handleChange is passed an event object. The event object contains information about the change event. The component uses the event object to get the value that the user entered into the input field.

1// helloBinding.js
2import { LightningElement } from "lwc";
3
4export default class HelloBinding extends LightningElement {
5  greeting = "World";
6
7  handleChange(event) {
8    this.greeting = event.target.value;
9  }
10}

Most of this code is standard HTML and JavaScript.

When a component rerenders, the expressions used in the template are reevaluated.

Note

Use Getters Instead of Expressions

To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.

Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.

Define a getter that computes the value in your JavaScript class.

1get propertyName() { ... }

Access the getter from the template.

1{ propertyName }

In this example, a user enters their first and last name. A JavaScript getter computes a new value, uppercasedFullName, and the template renders it: DEANNA LI.

The uppercasedFullName property in the template is bound to the get uppercasedFullName() getter in the JavaScript class.

1<!-- helloExpressions.html -->
2<template>
3  <div class="slds-m-around_medium">
4    <lightning-input
5      name="firstName"
6      label="First Name"
7      onchange={handleChange}
8    ></lightning-input>
9    <lightning-input name="lastName" label="Last Name" onchange={handleChange}></lightning-input>
10    <p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>
11  </div>
12</template>

The handleChange function sets the firstName and lastName properties to the values that the user enters. The uppercasedFullName() getter combines and uppercases the names.

1// helloExpressions.js
2import { LightningElement } from "lwc";
3
4export default class HelloExpressions extends LightningElement {
5  firstName = "";
6  lastName = "";
7
8  handleChange(event) {
9    const field = event.target.name;
10    if (field === "firstName") {
11      this.firstName = event.target.value;
12    } else if (field === "lastName") {
13      this.lastName = event.target.value;
14    }
15  }
16
17  get uppercasedFullName() {
18    return `${this.firstName} ${this.lastName}`.toUpperCase();
19  }
20}

All fields are reactive. If the field is used in a template, or indirectly in a getter of a property that’s used in a template, the component rerenders when the property’s value changes. In this example, when firstName and lastName change, the template rerenders because they’re used in the uppercasedFullName getter, and that property is used in a template. See Reactivity for Fields, Objects, and Arrays.

Tip

See Also