display the contents of aura:if from another component

Question

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;"/>
    </aura:if>
</aura:component>

"mainComponent" - controller

displayHeaderDetails: function(component, event, helper) {
    if(component.get("v.hasHeader")){
        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}"/>
</aura:component>

"another component" - controller

doInit: function(component, event, helper) {
    $A.createComponent("c:mainComponent",
                       {},
        function(content, status) {
            if (status === "SUCCESS") {
                component.set("v.mianBody", content);
            }
        });
},
displayHeader: function(component, event, helper){
    component.get("v.mianBody").displayHeaderDetails();
}

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

Thank you in advance.

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);
}