Salesforce Lightning Expression : If Component

In this Salesforce tutorial, we will talk about Salesforce Lightning Expression syntax in Aura components and how expressions are commonly used with the aura:if component. In our previous tutorial we learn about Aura:attribute and how we can use aura attribute in Salesforce lightning app and lightning component.

Aura expressions are used in component markup to read attribute values, evaluate simple logic, call supported expression functions, and bind component properties to the UI. They are written inside curly braces with an exclamation mark, for example {!v.Edit}. This tutorial focuses on using an expression inside aura:if so that a Lightning component can display one block when a condition is true and another block when it is false.

What is Salesforce Lightning Expression in Aura Components?

Salesforce Lightning Expression allows you to make calculations and access property values and is evaluated and dynamically replaced when component is evaluated.

In Aura component markup, the most common expression use case is reading a component attribute with the v value provider. For example, {!v.Edit} reads the value of the component attribute named Edit. If the attribute value changes and the expression is bound to the UI, the component can update what the user sees.

Salesforce Lightning Expression Syntax in Aura Markup

• Syntax is {!<expression>}

When ever we have an expression, that expression will not be written on the screen the value of the expression is written on the screen.

The expression is placed in component markup, usually inside an attribute value or body content. The expression can read an attribute, compare values, combine Boolean conditions, or call a supported expression function.

<lightning:formattedText value="{!v.message}" />
<aura:if isTrue="{!v.showButton}">
    <lightning:button label="Save" />
</aura:if>

Rules to use Expression.

• Only use the {!} syntax in the markup in .app file or .cmp resources.
• If we using an expression inside a javascript, use string syntax to evaluate an expression.

In JavaScript controller or helper files, do not write {!v.attributeName}. Use component APIs such as cmp.get(“v.attributeName”) and cmp.set(“v.attributeName”, value). The expression syntax belongs to Aura markup, while JavaScript uses string paths to read or update component attributes.

Example

var theLabel=cmp.set("v.label");

As shown above, we have a variable called theLabel and we getting a component attribute whose named is label. Here we have not used any ! symbol.

For reading a value in JavaScript, cmp.get() is commonly used. For updating a value, cmp.set() is used with the attribute path and the new value.

var labelValue = cmp.get("v.label");
cmp.set("v.label", "Updated Label");

Aura Expression Value Providers: v, c, and this

Aura expressions usually start with a value provider. The value provider tells the framework where to look for the value or action referenced by the expression.

Value provider	Use in Aura expression	Example
v	Accesses component attributes.	{!v.Edit}
c	References client-side controller actions in markup.	{!c.handleClick}
this	Refers to the current component in supported expression contexts.	Used less often in beginner examples.

For the aura:if example in this tutorial, v.Edit is the important expression because it checks the Boolean attribute named Edit.

Conditional Salesforce Lightning Expression with aura:if

The aura:if component conditionally instantiates and renders content. It checks the expression assigned to its isTrue attribute. When the expression evaluates to true, the body of aura:if is shown. When it evaluates to false, the content inside aura:set attribute=”else” is shown, if an else block is provided.

aura:if Attributes Used with Salesforce Lightning Expression

Attribute	attribute type	Required
body	ComponentDefRef[]	yes
else	ComponentDefRef[]
isTrue	Boolean	yes

The key attribute is isTrue. It must evaluate to a Boolean value. In simple examples, it reads a Boolean component attribute directly, such as {!v.Edit}. In real components, it can also use operators or supported functions when the condition needs to be more specific.

<aura:if isTrue="{!and(v.isActive, v.hasPermission)}">
    <lightning:button label="Edit Record" />
    <aura:set attribute="else">
        <p>You cannot edit this record.</p>
    </aura:set>
</aura:if>

Lightning Component

In this example we are going to learn about how to use an expression in Lightning component and lightning application using If else statement.

<aura:component >
    <aura:attribute name="Edit" type="Boolean" default="false" />
    <aura:if isTrue="{!v.Edit}">
        <ui:button label="Submit" />
    <aura:set attribute="else">
        Welcome to Tutorialkart.com
    </aura:set>
    </aura:if>
</aura:component>

The component declares a Boolean attribute named Edit. Because its default value is false, the first render shows the else content. If the value of Edit becomes true, the expression {!v.Edit} evaluates to true and the Submit button is displayed.

Lightning Application.

<aura:application >
    <c:expression />
</aura:application>

• Click on Preview button.

From above, we have added <aura:component> and included a nested component called <aura:attribute> and the name of the attribute is Edit, attribute type is Boolean and the default value is “false”. Now there is another component available called <aura:if>. Using this attribute we can check the value of  {!v.Edit} expression. If the value of this expression is True, it will display “Submit” button. Then if the statement is “false” then the following string is displayed.

Output When aura:if Expression is False

Because the Edit attribute has the default value false, the else block is rendered first. In this example, the displayed text is Welcome to Tutorialkart.com.

Output When aura:if Expression is True

When the expression is True then “Submit” button will appear.

Using Operators and Functions in Aura Conditional Expressions

Aura expressions can use supported operators and functions for simple conditions. Keep the expression readable. If the logic becomes long or difficult to understand, calculate the value in the JavaScript controller or helper and store the final Boolean value in a component attribute.

Condition needed	Expression example	Meaning
Check one Boolean attribute	{!v.Edit}	True when Edit is true.
Check two conditions	{!and(v.Edit, v.isOwner)}	True only when both values are true.
Check either condition	{!or(v.Edit, v.isAdmin)}	True when at least one value is true.
Reverse a condition	{!not(v.Edit)}	True when Edit is false.
Compare values	{!v.status == ‘Open’}	True when status is Open.

For maintainable Aura components, avoid placing business logic directly in markup. Use expressions for presentation decisions and small comparisons only.

Common Mistakes with Salesforce Lightning Expression and aura:if

• Using expression syntax inside JavaScript: In JavaScript, use cmp.get(“v.name”) and cmp.set(“v.name”, value), not {!v.name}.
• Returning a non-Boolean value to isTrue: The isTrue attribute should evaluate to true or false.
• Writing very long conditions in markup: Long expressions are harder to test and maintain.
• Expecting aura:if to behave like CSS hide/show: aura:if conditionally creates and removes content. For purely visual hiding, consider whether a CSS-based approach is more suitable.
• Misspelling the attribute path: {!v.Edit} and {!v.edit} are not the same when the attribute name is defined as Edit.

Official Salesforce References for Aura Expressions

For deeper reference, use the official Salesforce documentation on Aura expression overview, conditional expressions, expression functions, and the aura:if component reference.

Salesforce Lightning Expression If Component FAQs

Editorial QA Checklist for Salesforce Lightning Expression Tutorial

• Confirm that every new Aura markup code block uses a PrismJS-compatible class such as language-xml syntax.
• Verify that existing images and their source URLs remain unchanged.
• Check that aura:if, isTrue, v.Edit, and JavaScript cmp.get()/cmp.set() usage are explained separately.
• Ensure FAQ questions are specific to Salesforce Lightning Expression and the Aura if component.
• Review official Salesforce documentation links for Aura expressions and aura:if before publishing major updates.