Dynamic nested component creation in lightning

Suyash N
Suyash N 784 Views Add a Comment

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.

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.

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

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

Step-3: Now we will call the component.

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 … 🙂

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments