Understanding Expressions in Lightning

Posted on Updated on

Hi All,

Yesterday I stuck with Expressions in Lightning. While solving this I came to know about different ways of using Expressions and different types of these.

An expression is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value. You can use expressions for dynamic output or passing values into components by assigning them to attributes. Expressions are also used to provide action methods for user interface events(i.e. OnClick,OnHover).

Bound Expressions

Bound expression syntax is: {!expression}. Curly braces with “!” bang operator is used for Bound expressions.

If you are making any change using Bound expression it will immediately reflected on your component. Bound expressions are used to reflect changes on your Lightning Component. Below are examples of Bound expressions in component.

<aura:component>
	
	<!-- Accessing Fields and Related Objects -->
	<p>{!v.accounts.Name}</p>
	
	<!-- Concatinate value with String -->
	<p>{!'Hello ' + v.msg}</p>
	
	<!-- Ternary Operator -->
	<ui:button aura:id="likeBtn" label="{!(v.likeId == null) ? 'Like It' : 'Unlike It'}" />
	
	<!-- Conditional Markup -->
	<aura:attribute name="edit" type="Boolean" default="true"/>
	<aura:if isTrue="{!v.edit}">
		<ui:button label="Edit"/>
	<aura:set attribute="else">
		You can’t edit this.
	</aura:set>
	</aura:if>
	
	<!-- Adding two items -->
	{!(v.item1) + (v.item2)}
	
	<!-- Using Global Variables -->
	{!$Browser.isPhone}
	{!$Locale.timezone}
	
	<!-- Action Method -->
	<ui:button aura:id="likeBtn" label="Press Me" press="{!c.update}"/>
	
	<!-- Array Length -->
	{!v.myArray && v.myArray.length > 0}
	
</component>

Unbound Expressions

Unbound expression syntax is: {#expression}. Curly braces with “#” hash operator is used for Unbound expressions.

If you are making any change using unbound expression, it will not immediately reflect on your component. If you don’t want to reflect changes, you can use unbound expressions.

Note : Unbound expression changes are not reflected on component but they can be seen by javascript.

Below example show use of unbound expression in component.

//Component1.cmp
<aura:component>
    <aura:attribute name="truthy" type="Boolean"></aura:attribute>
     
    <aura:if isTrue="{#v.truthy}">
        True
    <aura:set attribute="else">
        False
    </aura:set>
    </aura:if>
    <ui:button aura:id="button" label="Check" press="{!c.update}"/>
</aura:component>
 
//Component1Controller.js
({
    update : function(component, event, helper) {
        component.set("v.truthy","false");
		console.log('----> '+component.get("v.truthy"));
    }
})
 
//Component1Renderer.js
({
    rerender: function(cmp, helper) {
        console.log('rerender'); 
        return this.superRerender()
    },
})

In above code when you click on “Check” button it will udpate unbound expression {!#v.truthy} in javascript controller. You will be able to see changes in console but they are not reflected on component.

Hope this will be helpful. Happy coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s