Aura Component Expression Syntax Simplified

Aura expression syntax allows you to access data present in the attribute of your component. You can dynamically display them in the UI or pass them down as a parameter in the component.

Aura expression syntax has the following structure:

{!expression}

Anything present inside the {! } delimiter will be evaluated and dynamically replaced with the respective value when the component renders or when a value is used by the component.

An expression syntax can contain any literal values, operators, or any other sub-expression which will be resolved to a single value post evaluation.

We will be modifying the MyAwesomeComponent which we have created in the previous part to learn about different expression syntax.

Let’s see different form of expression syntax below:

Aura Component Expression to reference a value from an attribute:

Syntax: {!v.attributeName}

Here v in {!v.attributeName} is the value provider which enables you to access the respective value of an attribute present inside the component at that moment. You can relate that it points to a component attribute set and is used to get any attribute value present inside that component.

Let’s see them in action:

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to the learning journey of Salesforce Lightning Aura Components!" />

    <lightning:card title="AwesomeAuraComponent">
        <p class="slds-p-horizontal_small">
            <p>{!v.welcome}</p>
        </p>
    </lightning:card>
</aura:component>	

In the above code, we have declared a string attribute and accessing its default value using the {!v.welcome} expression.

Aura Component Expression for calling client-side controller methods:

Syntax: {!c.handleClick}

Here c in {!c.handleClick} is the value provider which enables you to wire up event handlers and actions for the component. You can relate that it points to a controller and is used to invoke any controller methods for a given event.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to the learning journey of Salesforce Lightning Aura Components!" />

    <lightning:card title="AwesomeAuraComponent">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick="{!c.greetings}"/>
        </aura:set>

        <p class="slds-p-horizontal_small">
            <p>{!v.welcome}</p>
        </p>
    </lightning:card>
</aura:component>	

({
    greetings : function(component, event, helper) {
        component.set('v.welcome', "Hey, Have an awesome day :)");
    }
})

In the above javascript controller notice we are using component.set(‘v.welcome’, “Hey…”);

What does v doing in javascript controller and we are not using expression syntax here as we did in component markup?

v in javascript controller is again a value provider referring to the component attribute set and don’t require expression syntax in javascript code because expression syntax is meant for component markup.

Aura Component Expression for using an operator:

It allows you to create more complex expressions using operators in your expressions.

In the below example we have used the + operator.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to the learning journey of Salesforce Lightning Aura Components!" />

    <lightning:card title="AwesomeAuraComponent">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick="{!c.greetings}"/>
        </aura:set>

        <p class="slds-p-horizontal_small">
            <p>{!v.welcome + ' and happy learning!'}</p>
        </p>
    </lightning:card>
</aura:component>	

({
    greetings : function(component, event, helper) {
        component.set('v.welcome', "Hey, Have an awesome day :)");
    }
})

Here is the complete list of operators from salesforce developer docs –

Aura Component Expression for using functions:

The expression syntax can contain math, string, array, comparison, boolean, and conditional functions. All functions are case-sensitive.

Please note that you can not call any controller functions directly by using the expression syntax.

Here is the complete list of all the functions from Salesforce developer docs which can be included in an expression –

In the below example, we have used add() function.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to the learning journey of Salesforce Lightning Aura Components!" />

    <lightning:card title="AwesomeAuraComponent">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick="{!c.greetings}"/>
        </aura:set>

        <p class="slds-p-horizontal_small">
            <p>{!add(v.welcome, ' and happy learning!')}</p>
        </p>
    </lightning:card>
</aura:component>	

({
    greetings : function(component, event, helper) {
        component.set('v.welcome', "Hey, Have an awesome day :)");
    }
})

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂