Alternate/Workaround for contains() function in aura:if Condition in Lightning Component

Let us assume there is a situation to check a value in List attribute within Component markup and render the body if the value is present in the List. What do you generally do in this scenario ? You may take advantage of Javascript and do some hack and set one attribute ( may be boolean ) and then do your action. Huh. Why don’t we think in different way ?

Lets see an example with approach we wanted and an alternate approach below:

Example:

We have a lightning component, in this component we have a attribute of list of strings: 

<aura:attribute name="listItems" type="list" default="['Name' , 'Phone']">

based on the ‘listItems‘ attribute, we need to conditionally render the component body like this :

• if  listItems list attribute contains or include Name element then display the paragraph (first one)
• if  listItems list attribute contains or include Phone element then display the paragraph (second one)

<aura:if isTrue="{!CONTAINS(v.listItems, 'Name')}">
   <p>Print if value contains in list</p>
</aura:if>

<aura:if isTrue="{!CONTAINS(v.listItems, 'Phone')}">
   <p>Print if value contains in list</p>
</aura:if>

OOPS  !! 

Currently, there is NO Expression operators [ contains(), include() ] available in lightning which can check that item are in the list or not. :

Let’s see an awesome way of achieving this and to make it generic.

Step 1 : Create a Lightning Component : auraIfContains.cmp

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:attribute name="items" type="List" />
    <aura:attribute name="element" type="String" />
    <aura:attribute name="condition" type="Boolean" />
    
    <aura:if isTrue="{!v.condition}">
        {!v.body}
    </aura:if>
</aura:component>

Component javaScript controller : auraIfContainsController.js 

({
	doInit: function(component, event, helper) {
        
        var getList = component.get('v.items'); 
        var getElement = component.get('v.element');
        var getElementIndex = getList.indexOf(getElement);
       
       // if getElementIndex is not equal to -1 it's means list contains this element. 
        if(getElementIndex != -1){ 
          component.set('v.condition',true);
        }else{
          component.set('v.condition',false);
        }
    }
})

How to use :

• Use our custom auraIfWithContains lightning component instead of aura:if to render component body based on list values. You just have to pass the list of items and element to search in this component.
• If the given value/element present in list then the component body will be rendered. In this case, paragraphs.

Step 2 : Create Lightning Component : auraIfContainsContainer.cmp

<aura:component>
    <!-- create aura:attribute with list/array type-->  
    <aura:attribute name="listItems" type="List" default="['Name','Phone']"/>
    
   <!-- use 'auraIfWithContains' component with passing item list and contains element name.-->  
    <c:auraIfWithContains items="{!v.listItems}"  element="Name"> 
       <p><b>yes name is contains in list</b></p> 
    </c:auraIfWithContains>
    
    <c:auraIfWithContains items="{!v.listItems}"  element="Email"> 
       <p><b> No Email is not contains in list, so it's not showing</b></p>
    </c:auraIfWithContains>
    
    <c:auraIfWithContains items="{!v.listItems}"  element="Phone"> 
       <p><b> yes Phone is contains in list</b></p> 
    </c:auraIfWithContains>
</aura:component>

Step 3 : Create Lightning Application for Testing: demo.app

From Developer Console >> File >> New >> Lightning Application

<aura:application extends="force:slds">
    <c:auraIfContainsContainer/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

check also : How to Change lightning:Icon Color In Salesforce Lightning Component

Wow. It looks to be working great. Thanks for reading this post.

Please like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂