Dynamic nested component creation in lightning

Sometimes our component markup code gets too bigger that we cannot write child components markup in the same parent. That makes our code too lengthy to write and understand and makes the component too heavy to handle. One better approach is Dynamic nested component creation. Dynamically create the components which we want to use for a shorter period or specific purpose. Dynamic create them and append them to our parent body and destroy them when their work is done to free memory again. This approach is more efficient and memory saving.

Contents

Demo GIF:Step-1: Create the DynamicNestedComponents lightning component.Step-2: Add dynamic creation code to the JS controller.Step-3: Now we will call the component.

Dynamic component creation is easy to write and use. You can call your custom component or native lightning components. You can also create HTML tags dynamically and append them to any div of your choice. So, let’s create a component dynamically.

Why create a component dynamically?
Creating components dynamically will make your code more efficient and modular. You can dynamically create any component and destroy it when it is done. This will save memory and prevent memory leaks.

Demo GIF:

Dynamic nested aura components

Step-1: Create the DynamicNestedComponents lightning component.

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open by default. In the right sidebar, click on Controller to create JS Controller too.

In the DynamicNestedComponents.cmp , paste the below code.


<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->

<aura:component >
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!-- Div where dynamically created component will be appended -->
	<div aura:id="outerDiv"></div>
</aura:component>

<aura:component >

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

</aura:component>

Step-2: Add dynamic creation code to the JS controller.

open the controller file DynamicNestedComponentsController.js and paste the below code.


({
	doInit : function(component, event, helper) {

		$A.createComponents([
	            ["lightning:card",{
	                "title" : "Dynamically Created Card",
	            }],
	            ["lightning:button",{
	                "label" : "Click Me",
                    "onclick" : component.getReference("c.selectItem")
	            }]
	        ],
            function(components, status){
                if (status === "SUCCESS") {
                    var card = components[0];
                    var button = components[1];

                    card.set("v.actions", button);

                    var outerDiv = component.find('outerDiv').get('v.body');
                    outerDiv.push(card);
                    component.find('outerDiv').set('v.body', outerDiv);
                }
            }
        );
	},    

	selectItem : function(component, event, helper) {
		alert('Clicked');
	}
})
/*
 Code by CafeForce
 Website: http://www.cafeforce.com
 DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE
*/

({

doInit : function(component, event, helper) {

$A.createComponents([

["lightning:card",{

"title" : "Dynamically Created Card",

}],

["lightning:button",{

"label" : "Click Me",

"onclick" : component.getReference("c.selectItem")

}]

function(components, status){

if (status === "SUCCESS") {

var card = components[0];

var button = components[1];

card.set("v.actions", button);

var outerDiv = component.find('outerDiv').get('v.body');

outerDiv.push(card);

component.find('outerDiv').set('v.body', outerDiv);

}

);

selectItem : function(component, event, helper) {

alert('Clicked');

}

})

Code by CafeForce

Website: http://www.cafeforce.com

DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE

Step-3: Now we will call the component.


<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com -->

<c:DynamicNestedHTMLTags />

<c:DynamicNestedHTMLTags />

Here we go, our component is ready to use now.

You can create nest many components, and destroying the outer component will destroy all inner components. This will make your component DOM friendly and light.

Go ahead… optimize your code…

Also, Check – Create and Destroy Lightning components Dynamically.

and Create Nested HTML Tags Dynamically

Cheers … 🙂