How to pass component name dynamically in Lightning App

Question

I creating a app in which each component have a button when click on the button the component should be rendered in the Lightning app page

but while calling the component from app i am not able to give the component name dynamically

  <aura:application controller="UniversalComponentClass" extends="force:slds">
    <aura:attribute name="components" type="AuraDefinitionBundle[]"/>
    <aura:attribute name="componentname" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:layout>
            <lightning:layoutItem padding="around-small">
                <div class="custom-box">
                <aura:iteration items="{!v.components}" var="a">
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                        <td><button type="button" onclick="{!c.showCaseDeleteModal}" label="{!a.MasterLabel}">{!a.MasterLabel}</button></td> 

                    </table>   
                </aura:iteration>
                </div>
            </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <c:{v.componentname}/>
        </lightning:layoutItem>
        </lightning:layout>
</aura:application>

Controller.js

({
    doInit : function(component, event, helper) {
        var action=component.get("c.getAllComponents");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state=='SUCCESS')
            {
                component.set("v.components",response.getReturnValue());
                console.log(component.get("v.components"));
            }
        });

        $A.enqueueAction(action);
    },

    showCaseDeleteModal:function(component,event,helper)
    {
        var ss=event.target.label;
        component.set("v.componentname",ss);
    }
})

is there any way to pass component name dynamically to ?

Answer 1

You can just create the component dynamically, that is by using $A.createComponent() method. As per SF doc:

The $A.createComponent() and $A.createComponents() methods support both client-side (synchronous) and server-side (asynchronous) component creation. For performance and other reasons, client-side creation is preferred.

To use $A.createComponent(), we need the component definition. If we don’t have the definition already on the client, the framework makes a server trip to get it. You can avoid this server trip by adding an tag for the component you’re creating in the markup of the component that calls $A.createComponent(). The tag ensures that the component definition is always available on the client. The tradeoff is that the definition is always downloaded instead of only when it’s needed. This performance tradeoff decision should depend on your use case.

If no server-side dependencies are found, the methods are executed synchronously on the client-side. The top-level component determines whether a server request is necessary for component creation. A component with server-side dependencies must be created on the server. Server-side dependencies include component definitions or dynamically loaded labels that aren’t already on the client, and other elements that can’t be predetermined by static markup analysis.

So your code can be slightly modified to achieve such:

<lightning:layoutItem padding="around-small" aura:id="componentContainer">
     <!-- <c:{v.componentname}/> -->
</lightning:layoutItem>

Revised showCaseDeleteModal() to create the component dynamically:

showCaseDeleteModal:function(component,event,helper)
{
    var ss=event.target.label;
    $A.createComponent(
               "c:" + ss, //assuming "ss" contains the correct component name
                {}, //args - attribute keypairs that you may want to pass
                function(newComponent, status, error) {
                   if (status==="SUCCESS") {
                       var container = cmp.find("componentContainer");
                       var body = container.get("v.body");
                       body.push(newComponent);
                       container.set("v.body", body);
                   }
                }
     );
}

Take note of the "componentContainer"