Conditionally Renderings with aura:if

In this blog I am going to show how to use aura:if to conditionally instantiates and renders either the body or the components .aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered any time with if condition. Below is the sample example how it looks like

Simple If Conditions

The below code contains two attributes to test if attribute is the boolean type and another attribute is of type List.

Here is the simple App for testing. The first time when the component is instantiated we are setting the flag to false and array size is greater than zero.The second time we are getting the flag to true and array to empty.

 Simple If Else

In this below code just I am using one flag to test if and else conditions. You can see an output with both the condition if the flag is true or false.

Here is the simple App to invoke the component. When you set the flag as false it will display the false message as true condition and else message is coming from the else condition.

When you set the flag as true


Nested If Else

 The below code we have two attributes to show the outer and inner if conditions.
If you set both outer and inner attributes to the .it will display the data as shown below.

If Else with Iteration 

The below code shows how to Iterate over the list and display the data based on the attribute “showEven”.

If you set “showEven” to false it will display only odd numbers as shown below.

If Else with Server Side Controller 

Simple Apex code that will return false


When you invoke this component, it will display the message based value return from the server side code.