I have a problem with aura if in lightning component, the condition doesn't work, my code below :

 <aura:if  isTrue="{!v.account.cel_email_mailable__c != 'N' }">
    <div  onclick="{!c.changeValue}" data-value="0" >
        <lightning:icon class="icn_green" iconName="utility:check" size="small" />
<aura:if  isTrue="{!v.account.cel_email_mailable__c!= 'Y' }">
    <div  onclick="{!c.changeValue}" data-value="1">
        <lightning:icon class="icn_red" iconName="utility:close"  size="small" />

It passes both conditions and displays both icons, image below : enter image description here

  • Check field api name. Lighting attributes are case sensetive. – Oleksandr Berehovskyi Aug 29 '18 at 11:07
  • I suggest you print the value in {!v.account.cel_email_mailable__c} before your aura:if and see what it returning. – Lightning Evangelist Aug 29 '18 at 13:20
  • @Kal how do we do this in a .cmp? – reda cherrabi Aug 29 '18 at 13:40
  • Added it as an answer. – Lightning Evangelist Aug 29 '18 at 13:59

I suggest you print the value in {!v.account.cel_email_mailable__c} before your aura:if and see what it returning. See below. And also, I took the liberty of changing your condition slightly because it felt like you did not know how to use else in aura:if.

<!-- Print the value in your component like so: -->
cel_email_mailable__c = {!v.account.cel_email_mailable__c}

<!-- aura:if with embedded else statement -->
<aura:if isTrue="{!v.account.cel_email_mailable__c == 'Y'}">
    <div onclick="{!c.changeValue}" data-value="0" >
        <lightning:icon class="icn_green" iconName="utility:check" size="small"/>
    <aura:set attribute="else">
        <div onclick="{!c.changeValue}" data-value="1">
            <lightning:icon class="icn_red" iconName="utility:close"  size="small"/>
| improve this answer | |
  • {!v.account.cel_email_mailable__c} is empty i have this result : (cel_email_mailable__c = ) and below the icone close .. , I do not understand why it's empty – reda cherrabi Aug 29 '18 at 14:09
  • 1
    There, you now know the problem. {!v.account.cel_email_mailable__c} is returning a blank value and so is falling into the else block. If your question is why is it blank at all, then that is outside the scope of this question because we have now answered your main question 'Aura if doesn't work'. For troubleshooting, I suggest you use console.log('------> ' + JSON.stringify(component.get('v.account'), null, 2)); in your ControllerJS to see the value in account variable in your browser logs. If that doesn't help, please post a new question with more details and code snippets. – Lightning Evangelist Aug 29 '18 at 14:17

Lightning is cAsE sEnSiTiVe. Check the capitalization of your field and attribute name. As an aside, it is far less error prone to simply say == Y and == N, rather than invert the nature of the tests. For example, if the value is == X, then both icons would also show.

{!v.account.cel_email_mailable__c == 'Y'}


{!v.account.cel_email_mailable__c == 'N'}
| improve this answer | |
  • I checked the name of the API and the type of the field is text with a character ,when I changed my code with yours, nothing was displayed – reda cherrabi Aug 29 '18 at 13:38
  • @redacherrabi I don't know what else to tell you; if the condition were met correctly, only one icon should display. – sfdcfox Aug 29 '18 at 15:57
  • its good but the problem now is this field cel_email_mailable__c is blank – reda cherrabi Aug 29 '18 at 16:00
  • @redacherrabi Check the capitalization of the field name... – sfdcfox Aug 29 '18 at 16:07

The problem is in the logic.

Aura:if will render both sections with whatever cel_email_mailable__c not equals to N or Y.

For example :

cel_email_mailable__c  == NULL 
cel_email_mailable__c  == 'A'
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.