Lightning web components Data Binding in a Template

Let us discuss here how using the Data Binding in a Template. Templating allows binding values from the JavaScript controller value to the Html view in Lightning web component. In Lightning web component, this can be achieved using simple {property} bindings. Bind properties in a component’s template to properties in the component’s JavaScript class. In the template, surround the property with curly braces, {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. Don’t write JavaScript expressions in a component’s template. Refer to this link for how to set up the environment.

Using Expressions

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

Now in the above example, the greeting property is blinded from the controller using the {greeting} binding expression to UI. The property in { } must be a valid JavaScript identifier or member expression.

Now its understand how to bind the expression from the input value instead of a hard-coded string.update the markup as shown below

update the JavaScript controller as shown below.

If you look at the above JavaScript controller we are using the event handling in the JavaScript class will pass the event to handleChange method. 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. we are using @track decorator to track the greeting propriety. Here is the output

Using Getter 

We will be using javascript getter to compute a value for a property. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template. The getter is much more powerful than expressions because they’re JavaScript functions. Define the Getter as shown below syntax.

Access the getter from the template using the below syntax

In this example, a user enters their first and last name. A JavaScript getter computes a new value and updates the value to the upper case. Update the markup as shown below.

The uppercasedFullName property in the template is bound to the get uppercasedFullName() getter in the JavaScript class. here is 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 and update the value to UI. You can see in JavaScript class we are using @track decorator with firstName and lastName Because firstName and lastName decorated with @track, if the value of firstName or lastName changes, the template rerenders. If we remove @track, the property values still change, but the component doesn’t re-render, so we don’t see update values in UI. Decorating a property with @track makes it private and reactive. To mark a property public and reactive, use @api.Here is the final output.

Here is another example that will get the data from the contact record and shows the data.


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.