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. One better approach is dynamic component creation. Dynamically create the components which we want to use, 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.
Method-1: Create a standard lightning component dynamically
We will create a lightning:button dynamically and append it to the div.
Step-1: Create a div in the parent component. [DynamicCreation.cmp]
1 2 3 4 5 6 7 8 9 |
<aura:component > <!-- Button to append dynamic component --> <lightning:button variant="brand" class="slds-m-bottom_medium" label="Create New Button" onclick="{! c.createComponent }" /> <!-- Div where dynamically created component will be appended --> <div aura:id="outerDiv"></div> </aura:component> |
Step-2: Create lightning component and append it to div. [DynamicCreationController.js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
({ createComponent : function(component, event, helper) { // Dynamic component creation $A.createComponent( "lightning:card",{ "title" : "Dynamically Created Card", }, function(buttonComponent, status, errorMessage){ if (status === "SUCCESS") { // Finding the div by aura:id and pushing newly created component into it. var outerDiv = component.find('outerDiv').get('v.body'); outerDiv.push(buttonComponent); component.find('outerDiv').set('v.body', outerDiv); } } ); } }) |
Method-2: Create a custom component using dynamic component creation
Here, we will create a custom lightning modal first and then we will call this modal dynamically in another component.
Step-1: Create a child component. [Child.cmp]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<aura:component > <!-- Attriute to show header Text --> <aura:attribute name="headerText" type="String" default="default Header" /> <!-- Modal Code --> <div class="demo-only" style="height: 600px;"> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <!-- Modal Header --> <header class="slds-modal__header"> <lightning:buttonIcon iconName="utility:close" class="slds-modal__close" size="large" variant="bare" alternativeText="Close" onclick="{! c.closeModal }"/> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!v.headerText}</h2> </header> <!-- Main Body of Modal --> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> <p>This is the body of this lightning modal. The markup code of this lightning modal remains in the seprate lightning component and when 'open modal' button is clicked, it is dynamically called/created and appended in parent's body.</p> <p>By clicking the close/cancel button we are just destroying the child component which will remove the markup of child component from parent body. This modal might sometime take a while to open but its advantage is its re-usable as it can be used in another component too.</p><br/> </div> <!-- Footer of Modal --> <footer class="slds-modal__footer"> <lightning:button variant="brand" label="Save" title="Save" onclick="{! c.handleSave }" /> <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.closeModal }" /> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </div> </aura:component> |
Step-1: Destroy child on cancel button click. [ChildController.js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
({ closeModal : function(component, event, helper) { // when a component is dynamically created in lightning, we use destroy() method to destroy it. component.destroy(); }, // action to execute when save button is clicked handleSave : function(component, event, helper) { // We are showing an alert box here, you can perform any stuff here. alert('Do Some action on me'); component.destroy(); } }) |
Step-3: Create a div in parent component where you want to append your child component.
[Parent.cmp]
1 2 3 4 5 6 7 8 9 |
<aura:component > <!-- Button to append dynamic component --> <lightning:button variant="brand" class="slds-m-bottom_medium" label="Create New Button" onclick="{! c.createComponent }" /> <!-- Div where dynamically created component will be appended --> <div aura:id="outerDiv"></div> </aura:component> |
Step-4: Create child component dynamically and append it to div. [ParentController.js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
({ createComponent : function(component, event, helper) { // Dynamic component creation $A.createComponent("c:LightningModalChild",{ 'headerText': 'Dynamically created Modal' },function(buttonComponent, status, errorMessage){ if (status === "SUCCESS") { // Finding the div by aura:id and pushing newly created component into it. var outerDiv = component.find('outerDiv').get('v.body'); outerDiv.push(buttonComponent); component.find('outerDiv').set('v.body', outerDiv); } } ); }, }) |
Step-5: Call Parent controller.
1 2 3 |
<c:Parent /> |
Method-3: Create an HTML tag dynamically
To create HTML tags dynamically, we will use aura:html tag. Aura:html can create any html tag.
Step-1: Create a div in the parent component. [DynamicCreation.cmp]
1 2 3 4 5 6 7 8 9 |
<aura:component > <!-- Button to append dynamic component --> <lightning:button variant="brand" class="slds-m-bottom_medium" label="Create New Button" onclick="{! c.createComponent }" /> <!-- Div where dynamically created component will be appended --> <div aura:id="outerDiv"></div> </aura:component> |
Step-2: Create HTML tag dynamically and append it to div. [DynamicCreationController.js]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
({ createComponent : function(component, event, helper) { // Dynamic component creation $A.createComponent( "aura:html",{ 'tag': 'button', 'body': 'New Button', 'HTMLAttributes':{"id":"button1", "onclick":component.getReference("c.btnClick")} }, function(buttonComponent, status, errorMessage){ if (status === "SUCCESS") { // Finding the div by aura:id and pushing newly created component into it. var outerDiv = component.find('outerDiv').get('v.body'); outerDiv.push(buttonComponent); component.find('outerDiv').set('v.body', outerDiv); } } ); }, btnClick : function(component, event, helper) { alert('Button Clicked'); } }) |
Our dynamic component creation is now ready to use. Go ahead and optimize your code.
You can destroy your dynamically created component by the child as well as the parent too. Click the link below to know more.
Also Check:
For any queries or suggestions, comment below.
Cheers … Happy Coding ……:)