Code By Code – Lightning Framework – Chapter 7 – Conditional Markup

Code By Code – Lightning Framework – Chapter 7 – Conditional Markup

Topics for this chapter:
– Conditional Markup

Use <aura:if> component to generate conditional markup. If the expression defined in <aura:if> is True, markup will be generated, also, if the expression is false, the markup will be destroyed. Using the <aura:if> tag is the preferred approach to conditionally display markup but there are alternatives.
<aura:if isTrue=”{!v.showNew}”>
<lightning:button variant=’neutral’ label=’New’ onclick=”{!c.createRecord}”/>

You can also use javascript to conditionally generate or destroy markup.

var elem = document.getElementById(“myDiv”);

There are multiple operators that you can use within a component markup. The operators must be used within {} in component markup. For ex, {!v.count > 10}

Conditional Operators:

  • == (eq)
  • != (ne)
  • <= (le)
  • >= (ge)
  • < (lt)
  • > (gt)

Logical Operators:

  • && (AND)
  • || (OR)
  • ! (NOT)

Lightning Component Development Day3 - App, Attributes, Looping, Conditional Markup, Handling Events

Conditional Markup

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 2 Comments

  1. Hi Manish,

    In my understanding answer for below question should be false , because if condition evaluates to false then only markup will be destroyed. Please suggest.

    Does aura:if destroy component markup if the condition evaluates to true?

    1. Yes Vipul, Thanks for bringing this to my attention. I have changed the quiz answer.

Leave a Reply

Close Menu