Data Binding in a Template
Bind properties in a component’s template to properties 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.
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 webcomponents.dev/create/lwc.
Here’s the simplest example of data binding. The greeting property in the template is bound to the greeting property in the JavaScript class.
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}
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.
Most of this code is standard HTML and JavaScript.
When a component rerenders, the expressions used in the template are reevaluated.
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.
Access the getter from the template.
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.
The handleChange function sets the firstName and lastName properties to the values that the user enters. The uppercasedFullName() getter combines and uppercases the names.
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.
See Also