Aura if else in lightning

 

Aura if else in lightning

Aura:if is used to display the content based on condition.If the condition is true the content is rendered.

Syntax:

<aura:if isTrue="{!v.attributeName}">

</aura:if>

Let's see a simple example to understand how to display text based on condition using aura:if,

<aura:attribute name="Test" type="Boolean" default="True"/>

<aura:if isTrue="{!v.Test}">

Hi,The value is true

</aura:attribute>

Now let's take another example to understand aura:if with else,

<aura:attribute name="Test" type="Boolean" default="True"/>

<aura:if isTrue="{!v.Test}">

Hi,The value is true

<aura:set attribute="else">

Hi,The value is false

</aura:set>

</aura:if>

Also aura:if supports or(), end() in isTrue expression,

<aura:if isTrue="{!or(v.attributeName1,v.attributeName1)}"

    Some text to display

    </aura:if>

The above block will rendered the text if one of the attributes is true.

<aura:if isTrue="{!and(v.attributeName1,v.attributeName1)}"

    Some text to display

    </aura:if>

    
The above will rendered the text if both the attribute are true.

 Let's see one more example for aura:if,

STEP 1) Create the lightning component (Name = ifattribute.cmp).

<aura:component >

<aura:attribute name="Test" type="Boolean" default="True"/>

<aura:if isTrue="{!v.Test}">

Hi,The value is true

<aura:set attribute="else">

Hi,The value is false

</aura:set>

</aura:if>

</aura:component>

STEP 2) Create a lightning app.

<aura:application extends="force:slds">

    <c:ifattribute/>

</aura:application>

Use multiple conditions in aura:if on lightning component:

<aura:component >    <aura:attribute name="ValueOneisTrue" type="boolean" default="true"/>    <aura:attribute name="ValueTwoisFalse" type="boolean" default="false"/>    <aura:attribute name="ValuethreeisTrue" type="boolean" default="true"/>    <aura:attribute name="ValueFourisFalse" type="boolean" default="false"/>   <!--aura:if sample -->    <aura:if  isTrue="{!and(v.ValueOneisTrue, v.ValuethreeisTrue)}" >       <div style="padding:15px; background-color:LightBlue">          and ==> this div show because both attribute is true       </div>    </aura:if>    <!--aura:if with aura:set sample-->    <aura:if  isTrue="{!or(v.ValueFourisFalse, v.ValueTwoisFalse)}" >       <div style="padding:15px; background-color:GreenYellow">          or ==> this div show because one attribute is true       </div>       <aura:set attribute="else">          <div style="padding:15px; background-color:GreenYellow">             or ==> this aura:set div show because both attribute is false          </div>       </aura:set>    </aura:if>    <!--aura:if with nested and condition-->    <aura:if  isTrue="{!or(and(v.ValueOneisTrue, v.ValuethreeisTrue) , v.ValueTwoisFalse ) }" >       <div style="padding:15px; background-color:LightGreen  ">          nested condition div show because in statment 1 of or()condition returns true.       </div>    </aura:if> </aura:component>

TestApp.app

1 2 3 4 5 6 7 8

<aura:application >   <c:sample/>   <!-- here c: is org. namespace prefix--> </aura:application>

Output-:

Aura:method in lightning component

 

Aura:method in lightning component

Till now we have seen how to handle communication between component's using events, now we will see how we can directly call a child component controller method from parent component controller method using Aura:method.

Sample syntax of Aura:method: (Declared in child)

<aura:method name="testMethod" action="{!c.someAction}"

  description="Test aura method with test parameter">

    <aura:attribute name="Test1" type="String" />  <!--optional parameter-->


</aura:method>

Note:  

• Aura method can have an optional parameters. We use <aura:attribute> tag in Aura:method to declare parameter.

• We do not need access system attribute in <aura:attribute> tag.

How to call aura:method from parent controller:


childComponentName.auraMethodNameInChildController("Some Value we are passing to child component attribute");


Now let us see the use with simple example,

ParentComp:

<aura:component>

    <aura:attribute name="parentAttributeName" type="String" default="Parent Value"/>

    <p>

 {!v.parentAttributeName}

   </p>

    <c:ChildComp aura:id="ChildComp" />    <!-- Giving id to child comp-->

    <lightning:button label="Go to aura method"

          onclick="{!c.gotoAuraMethod}"/>

</aura:component>

ParentCompController.js

({
gotoAuraMethod : function(component, event, helper) {
     
        var chldComp=component.find("ChildComp");  //  Finding child component
        var res=chldComp.testMethod("From parent");  //   Hitting aura method
        component.set("v.parentAttributeName",res); 
     
     
}
})

ChildComp:

<aura:component>

<aura:method name="testMethod" action="{!c.someAction}"
  description="Test aura method with test parameter">

    <aura:attribute name="childAttributeName" type="String" />

</aura:method>

</aura:component>

ChildCompController.js:

({
someAction : function(component, event, helper) {
               
     var params=event.getParam('arguments');
        if(params)
        {
           var param1=params.childAttributeName;
         
        }
       return param1+"Appended child value";
}
})

Application:

<aura:application extends="force:slds" >
    <c:ParentComp/>
</aura:application>

Output:

**********************************************************************************************************

After previewing application,

**********************************************************************************************************

After clicking "Go to aura method" button,

**********************************************************************************************************