3

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.

3

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);
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.