#2: Data Binding and Rendering | Learn Lightning Web Component Development | LWC Stack Salesforce

Agenda

• What is data binding?

• Types of data binding.

• Render data conditionally.

If you have started your journey as a developer already then you must have heard these terms data binding and rendering.

There are many high level data binding definitions are available online but I will try to keep it as simple as I can.

What is Data Binding?

In simple words when you map your data from Backend to Frontend called data binding. 

In LWC our backend will be JavaScript/Apex and frontend will be HTML.

Types of Data Binding?

In Lightning Web Components you can bind your data using two ways-

1. Using Expressions
2. Using getter properties

Example of data binding using Expressions

You can bind your JavaScript expressions to LWC using curly braces {}. You just have to declare the expression in the JavaScript and use it between {} in your HTML file to bind it.

In below example we are binding "myValue" from JS to LWC.

You can also make the expression value dynamic, like on any button click or text change. It's up to your requirements.

In below example I am changing the expression value on change of my input text in HTML.

The above handleChange will change the myValue expression on change of the input text value in real time.

Example of Data Binding using getter properties

You can use getter properties if you want 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.

Render Data Conditionally

To render data conditionally you can use "template if:true={expression}" and "template if:false={expression}"

In your expression you can have static or dynamic expressions. Also you can use your getter properties instead of expression as per your requirement. 

In below example I am using conditional rendering based on the click of the checkbox in LWC.

Checkout the Crash Course Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)