Data Binding in Lightning Web Component

jayakrishnasfdc

Data binding is the synchronization of data between business logic and view of the application. There are two types of data-binding

  1. One-Way Data Binding
  2. Two-Way Data Binding

One-Way Data Binding Vs Two-Way Data Binding

UI data changes can occur within two scopes:

1.Within a single component (One-Way Data Binding)

Eg- Typing into an input field: the updating of the input field occurs locally within a component; it does not affect other components directly so can use two way binding. Using two-way data binding strictly within a component is not  problematic.
Ex: Lightning Web Components

The data binding between components for property values is one-way. To communicate down from a parent component to a child component, set a property or call a method on the child component.

To communicate up from a child component to a parent component, send an event.

2. Between components (Two-Way Data Binding)

Using two-way data binding between components results in components receiving data from multiple sources, and this can be problematic
EX: Aura Components
Aura has two forms of expression syntax for data binding.

Here’s a summary of the differences between the forms of expression syntax.{#expression} (Unbound Expressions)Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child.{!expression} (Bound Expressions)Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.

Example of LWC with One way Data Binding

LWC is designed with a one way data binding approach. Initially this can feel frustrating, especially for people who have come to love the simplicity of two way .Lightning web components allow one way binding but aura support two way binding. One way binding follows from controller to view but vice versa is not possible.

One way binding means that the model is rendered in the view, but in order to update the model if the view changes, you must fire an event and handle that event to update the code in your controller.

To access any javascript property in template, surround that property with curly braces.
@track property = ''; // in javascript
{property} // in template with no spaces

If a property is changed in template it doesn’t automatically update in javascript. For the javascript property to update we need to create an onchange() event in the template, handle it and change the value of property in javascript.

One way binding example:

Exp.html

<template>
   {firstname}
   <lightning-input type="text" label="name" value={firstname} onchange={handlechange}></lightning-input>
</template>

Exp.js

import { LightningElement, track, api } from 'lwc';
export default class Sample extends LightningElement {
   @api firstname="hello";
   handlechange(event){
  console.log(this.firstname);  // This will not change even we change the view text data.   
   }
}

Here to explain better

this.firstName = event.target.value

this : If property is inside the class then use this. It specifies the current context

this.firstName : The variable name which we have defined at the beginning, we are just recalling it in the function to assign its changed value.



Thanks
Jayakrishna

Leave a comment