3

Is it possible to create an aura:if component having a isTrue evaluating dynamically to the value of an attribute?

I've tried the following and I'm getting a checkbox that is visible regardless of the value of the visible attribute.

<aura:component>
    <aura:attribute name="visible" type="Boolean" default="false"/>

    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>

    <form>
        {!v.body}
    </form>
</aura:component>
({
    onInit: function (component) {
        $A.createComponents([
                ["aura:if",{
                    "isTrue" : component.getReference("v.visible")
                }],
                ["lightning:input",{
                    "type" : "checkbox",
                    "label": "Some Label"
                }]
            ],
            function(components, status, errorMessage) {
                if (status === "SUCCESS") {
                    var body = component.get("v.body");
                    var auraIf = components[0];
                    var checkbox = components[1];
                    auraIf.set("v.body", checkbox);
                    body.push(auraIf);
                    component.set("v.body", body);
                } else if (status === "ERROR") {
                    console.log("Error", errorMessage);
                }
            });
})
1
  • A reference to an attribute value works fine for example when used for the value attribute in lightning:input. Oct 8, 2019 at 19:02

2 Answers 2

3

No. Most of the Aura library cannot be created dynamically, as they have special rules about how their contents are rendered. This includes aura:if, aura:iteration, and aura:renderIf. Internally, those components accept an array of Aura.ComponentRef instead of the usual Aura.Component elements.

This type of object is a "raw" component (one that has not yet been created), while Aura.Component represents a "cooked" component (one that has been created already). There's no way to get at "raw" components that I've seen, as $A.createComponents returns only "cooked" components, and those can't be used as templates.

I've posted this answer as it was a bit long for a comment, but this is certainly an X-Y Problem. You'll need to come up with a different solution to your problem, which will involve asking about your original "X" instead of this "Y" question.

0

I managed to achieve my goal by creating a custom component containing an aura:if inside, that looks exactly like this:

<!--c:CustomComponent-->
<aura:component>
    <aura:attribute name="isTrue" type="Boolean" required="true"/>
    <aura:attribute name="else" type="Aura.Component[]"/>

    <aura:if isTrue="{!v.isTrue}">
        {!v.body}
        <aura:set attribute="else">
            {!v.else}
        </aura:set>
    </aura:if>
</aura:component>

and creating the component dynamically exactly the same way I've tried before but with the custom component

({
    onInit: function (component) {
        $A.createComponents([
                ["c:CustomComponent",{
                    "isTrue" : component.getReference("v.visible")
                }],
                ["lightning:input",{
                    "type" : "checkbox",
                    "label": "Some Label"
                }]
            ],
            function(components, status, errorMessage) {
                if (status === "SUCCESS") {
                    var body = component.get("v.body");
                    var auraIf = components[0];
                    var checkbox = components[1];
                    auraIf.set("v.body", checkbox);
                    body.push(auraIf);
                    component.set("v.body", body);
                } else if (status === "ERROR") {
                    console.log("Error", errorMessage);
                }
            });
})

Now, the isTrue attribute is bound to the reference of the value attribute and it's dynamically reflected when the attribute value is changed, opposite to what happened in case of an aura:if.

You must log in to answer this question.

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