Sometimes lightning components are slow and bigger to use in our parent code. The replacement of a few simple lightning components are HTML tags. A lightning component is made up of many things and consists of many properties. If you want a use a simpler version of code, better to use an HTML tag/component. That makes our code light.
But what if we want a component to appear when needful and destroy when the work is done. One better approach is to 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 create HTML tags dynamically and append them to any div of your choice. So, let’s create a component dynamically.
Working Demo:
Step-1: Create the DynamicHTMLCreation 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 DynamicHTMLCreation.cmp , paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header --> <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: Add dynamic creation code to the JS controller.
open the controller file DynamicHTMLCreationController.js and paste the below code.
|
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 30 31 32 |
({ 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'); } }) /* 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.
|
1 2 3 4 |
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com --> <c:DynamicHTMLCreation /> |
Here we go, our component is ready to use now. Whenever you need to add multiple components or components in iteration, you can always create them dynamically and destroy them when the work is done.
Also, Check – Create and Destroy Lightning components Dynamically.
Cheers & Happy Coding … 🙂
