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

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)

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

Component javaScript controller : auraIfContainsController.js 

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

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

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

Output :

aura-if-contains-alternate

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 🙂

(Visited 16,882 times, 1 visits today)

8 thoughts on “Alternate/Workaround for contains() function in aura:if Condition in Lightning Component”

  1. If you’re using this on a component where list of items might change, you may want to add an onchange handler to the list. Add this line to the component:

    Reply
  2. If you’re using this in a context where the list of items might change, you want to add an onchange handler:

    Reply
  3. I’ve been trying to limit the number of characters in the label displayed. Thought I’d go with left() function, but it isn’t supported. Can you help? The label of the lightning:input field comes from the object’s field label itself. Sometimes if the label is long, it overlaps with the next field or makes the layout unpleasant.

    Reply

Leave a Comment