Contains in aura:if : auraIfContains

Currently, we don’t have the ability to check contains in aura:if tag Which is most needed features in lightning.

Component Name:

AuraIfContains.cmp

<!-- auraIfContains.cmp Description: This is geneic component can be used
 in replacement of aura:if when contain expression is needed. 
 Created By : Tejas Kapasi Date : 03/10/2018 
--> 
<aura:component >
   <aura:attribute name="checkCaseSensitivity" type="Boolean" default="true" description="Only Applicable to Simple String."/>
   <aura:attribute name="items" type="List" description="List of elements"/>
   <aura:attribute name="element" type="String" description="elements to compare in the list"/>
   <aura:attribute name="isElementFound" type="Boolean" />
   <!-- If change happens then it should absorb and 
   	showcase the appropriate results Useful when we 
   	use this component in iteration or used where passing 
   	attributes values gets changed and hence recalculation require. 
   --> 
   <aura:handler name="change" value="{!v.items}" action="{!c.doInit}"/>
   <aura:handler name="change" value="{!v.element}" action="{!c.doInit}"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   
	<aura:if isTrue="{!v.isElementFound}">
   {!v.body} 
	</aura:if>
</aura:component>

auraIfContainsController.js

({
	doInit: function (component, event, helper) {
		var getItems = component.get('v.items');
		var getElement = component.get('v.element'); //It will not match with undefined. 
		if ($A.util.isEmpty(getItems) || $A.util.isEmpty(getElement.trim())) {
			component.set('v.isElementFound', false) return;
		};
		var getCurrentElementIndex; //Check type and if it is String then check contains. 
		if (typeof getItems == 'string' &amp;&amp; typeof getElement == 'string') {
			if (component.get("v.checkCaseSensitivity")) {
				getCurrentElementIndex = getItems.indexOf(getElement);
			} else {
				getCurrentElementIndex = getItems.toLowerCase().indexOf(getElement.toLowerCase());
			}
		} else {
			getCurrentElementIndex = getItems.indexOf(getElement);
		}
		// if getCurrentElementIndex is not equal to -1 it's means list contains this element. 
		if (getCurrentElementIndex != -1) {
			component.set('v.isElementFound', true);
		} else {
			component.set('v.isElementFound', false);
		}
	}
})

auraIfContainsApp.app

<aura:application extends="force:slds">
    <aura:attribute name="element" type="String" default="yellow" description="elements to compare in the list" />
    <aura:attribute name="items_Str" type="String" default="Red,Yellow,Orrange" description="elements to compare in the string" />
    <aura:attribute name="items_arr" type="String[]" default="Red,Yellow,Orrange" description="elements to compare in the list" /> 

    String => {!v.items_Str}
    <br/> Element => {!v.element}
    
    <br/> I am String CaseSensitive False ->
    <c:auraIfContains items="{!v.items_Str}" element="{!v.element}" checkCaseSensitivity="false"> 	{!v.element} 
	</c:auraIfContains>
    <br/> I am String CaseSensitive True ->
    <c:auraIfContains items="{!v.items_Str}" element="{!v.element}" checkCaseSensitivity="true"> 	{!v.element} 
	</c:auraIfContains>
    <br/>
    
    <br/> Array are always caseSensitive irrespective sensitivity flag.
    <br/> I am Array CaseSensitive False ->
    <c:auraIfContains items="{!v.items_arr}" element="{!v.element}" checkCaseSensitivity="false"> 	{!v.element} 
	</c:auraIfContains>
    
    <br/> I am Array CaseSensitive True ->    
    <c:auraIfContains items="{!v.items_arr}" element="{!v.element}" checkCaseSensitivity="false"> 	{!v.element} 
	</c:auraIfContains>
</aura:application>

Like our Facebook page and get the latest updates. Do let us know if you want to see the blog on the specific topic.

One thought on “Contains in aura:if : auraIfContains”

Comments are closed.