Bound and Unbound Expressions in Lightning Components
When we work with components, the first thing we do is declaring the attributes and initialize them. We use expressions for initializing our components. There are two types of expressions, bound and unbound that are used to perform data binding in Lightning Components. Let’s learn about the expressions in detail.
Bound and Unbound Expressions
Bound Expression: Bound Expression is represented as {!v.str}. Whenever the value of the string is changed, this expression will reflect the change and also affect the components where it is used, we can say the value change dynamically through this expression.
Unbound Expression: Unbound Expression is represented as {#v.str}. Whenever the value of the string is changed, this expression will not reflect the change, we can say the value remains static through this expression.
Example
Create a lightning component and add the following code:
<aura:component >
<!--
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<aura:attribute name="str" type="string" default="Hello World!"/>
<ui:outputText value="Enter a string value : "/><ui:inputText value="{!v.str}"/>
<br/><br/>
<ui:outputText value="{#v.str}"/>
<br/><br/>
<ui:outputText value="{!v.str}"/>
</aura:component>
Output
You can see the output here:
The value in bound expression variable changes on change of the input but the value of unbound expression remains the same.
Support
That’s all about Bound and Unbound Expressions in Lightning Components, for any further queries feel free to contact us at:
https://wedgecommerce.com/contact-us/
Or let us know your views on how to make this code better, in the comments section below.
