Data Binding in Lightning Web Component

Data Binding in Lightning Web Component

What is Data Binding in Lightning Web Component?

In simple words when you map your data from the backend(JS) to the front end(HTML) that’s called data  binding in LWC.

Different ways of data binding

There are two way to data binding in LWC.

1. Using Expressions
2. Using getter properties

#1. Using Expressions

Below is a simple example of how to bind the data using expressions.

1.1. Using Dynamic Expressions

Below is a simple example of how to bind the data using Dynamic Expressions.

#2. Using getter properties

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.

Type of Decorators in Lightning Web Component

Learn more about Decorators in Lightning Web Component. we have three unique decorators that add functionality to a function or property. Decorators dynamically alter or modify the functionality

There are three types of Decorators in Lightning web components.

1. Api
2. Track
3. Wire

Render data conditionally

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.

The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

Let’s look at some code.

Js code

Check Conditional Rendering in LWC using lwc:if, lwc:elseif and lwc:else.