Child Lightning Component needs parent init to work. Doable without dynamic components?

Question

When I load this Lightning component a child component's init gets a null pointer as an attribute doesn't yet exist. I is populated via an Apex action during the parent components init. I know that a Child components init is called before the parents init. Nonetheless I need to make this work without dynamic components. And I'd expect this to be a very common scenario.

Can this be solved by events or change handlers or refresh view calls??

Markup

<aura:component controller="MyCtrl" implements="force:lightningQuickAction,force:hasRecordId">
    <aura:attribute name="attributes" type="List" access="private" />

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

    <c:attributeList items="{!v.attributes}" />
</aura:component>

Controller

({
    init: function(cmp, evt, helper) {
        var action = cmp.get("c.queryAttributes");
        action.setCallback(this, function(response) {
            cmp.set("v.attributes", response.getReturnValue());
        });

        $A.enqueueAction(action);   
    },
});

Answer 1

I tend to use both an init method and a change handler on the attribute that could be set after init e.g. of such a child component:

<aura:component access="global">

    <aura:attribute name="topicName" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="change" value="{!v.topicName}" action="{!c.doInit}"/>

</aura:component>

JS:

({
    doInit : function(component, event, helper) {
        var topicName = component.get('v.topicName');

        if(!$A.util.isEmpty(topicName)) {
            // Do whatever I need to do
        }
    }
})

Answer 2

you can use instead of init on child component Lightning method, that do the same. Call this method on child from parent init

Markup

<aura:component controller="MyCtrl" implements="force:lightningQuickAction,force:hasRecordId">
    <aura:attribute name="attributes" type="List" access="private" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <c:attributeList aura:id="attributeiList" items="{!v.attributes}" />
</aura:component>

Controller

({
    init: function(cmp, evt, helper) {
        var action = cmp.get("c.queryAttributes");
        action.setCallback(this, function(response) {
            cmp.set("v.attributes", response.getReturnValue());
            var attributesList = cmp.find("attributeiList");
            attributesList.doInit();
        });

        $A.enqueueAction(action);   
    },
})

c:attributeList

<aura:component>
    <aura:attribute name="items" type="List" access="public" />
    <aura:method name="doInit" action="{!c.doInit}"/>
</aura:component>

Answer 3

Its seems i have not found any error while running above code. Child is displaying parent list properly . Here is what i tried on your code.

Apex Controller : MyCtrl

global with sharing class  MyCtrl {
   @auraEnabled
    public static List<contact> queryAttributes()   {
        List<contact> contants=new list<contact>();  
        contants=[select id,name from contact limit 10];
        return contants; 
    } 
}

component : attributeList

<aura:component  implements="force:appHostable" access="global"  >
    <aura:attribute name="items" type="list"/>   
    <aura:iteration var="cont" items="{!v.items}" >                
            <h2>{!cont.Name}</h2> <br/>     
    </aura:iteration>
</aura:component>

Here is the Application i used to call child component attributeList

APP : app191782

<aura:application controller="MyCtrl" extends="force:slds" >
    <aura:attribute name="attributes" type="List" access="private" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <c:attributeList items="{!v.attributes}" />    
</aura:application>

Controller

({
    init: function(cmp, evt, helper) {
        var action = cmp.get("c.queryAttributes");
        action.setCallback(this, function(response) {
            cmp.set("v.attributes", response.getReturnValue());
        });

        $A.enqueueAction(action);   
    },
});

Here is the result i get. Working Properly

Answer 4

As you know that child component init will be called first.

So, you can do one thing here. Add condition for showing your child component.

For Example.

 <aura:component controller="MyCtrl" 
   implements="force:lightningQuickAction,force:hasRecordId">
   <aura:attribute name="attributes" type="List" access="private" />
   <aura:attribute name="parentInitialized" type="Boolean"/>
   <aura:handler name="init" value="{!this}" action="{!c.init}" />

   <aura:if isTrue ="{!v.parentInitialized}">
     <c:attributeList aura:id="attributeiList" items="{!v.attributes}" />
   </aura:if>
 </aura:component>

Controller

({
    init: function(cmp, evt, helper) {
    var action = cmp.get("c.queryAttributes");
    action.setCallback(this, function(response) {
        cmp.set("v.attributes", response.getReturnValue());
        // **once init done and your resposne is here [which child component needed].**
        cmp.set('v.parentInitialized', true);
    });

    $A.enqueueAction(action);   
},
});