I'm trying to show (or unshow) the contents of aura:if by changing the isTrue value from another component.

The value of isTrue is changed but the contents cannot be displayed.. Anyone knows how to display the contents of aura:if from another component.

Below is the code that I tried.

"mainComponent" - component

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:html tag="div" />
    <aura:attribute name="hasHeader" type="Boolean" default="false"/>
    <aura:method name="displayHeaderDetails" action="{!c.displayHeaderDetails}" />

    <aura:if isTrue="{!v.hasHeader}">
        <div style="height:50px;width:50px;background-color:red;"/>

"mainComponent" - controller

displayHeaderDetails: function(component, event, helper) {
        component.set("v.hasHeader", false);
    } else {
        component.set("v.hasHeader", true);

"another component" - component

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="mianBody" type="Aura.Component" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <lightning:button variant="brand" label="Display Header" onclick="{!c.displayHeader}"/>

"another component" - controller

doInit: function(component, event, helper) {
        function(content, status) {
            if (status === "SUCCESS") {
                component.set("v.mianBody", content);
displayHeader: function(component, event, helper){

hasHeader value is changed correctly, but the content of aura:if(= div) is not shown..

Thank you in advance.


1 Answer 1


In your mainComponent, you dont really need displayHeaderDetails method because logically it is not doing anything - it is doing like if x is true then set x to true.

Do below changes in another component:

displayHeader: function(component, event, helper){
    component.get("v.mianBody").set(v.hasHeader, true);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .