Dynamically Creating and Destroying Lightning Button(ui:button)

Sometimes it is required to create the lightning component at run time and destroy them. For example you can create a modalDialog box which display different messages to user. So while performing any operation like deleting records, you want to display message saying deleted successfully of not able to delete due to some error, then you can create the modalDialog box dynamically and destroy it.

In order to create any lightning component dynamically, you can use $A.createComponent() to instantiate a component. This function take 3 parameters mentioned below:

1.  type (String) :Type of component to create like lightning:button, lightning:component etc.
2. attributes : Map of all parameters required for new component.
3. callback function: Once the component is created, this callback function will be invoked.This function can be used to append newly created component to target component. You can place the newly created component inside some div to display.

For Demo purpose, I will be creating a lightning component in which we will create lightning buttons and destroy them dynamically. Below is component, controller and app code for this:

Explanation:

Whenever user clicks on create button, controller will create new button dynamically and append it in <Div/> tag. Controller always checks for v.body which returns the body of component and will check the length of body and append label to new button.


How to Destroy any component dynamically

You can simply fetch the body of lightning component and set it to blank array.
In above example, in order to delete all buttons present in div tag, we find the div tag with aura:id and set the body as blank array.

component.find("newTag").set("v.body",[]);

In order to remove all content of any components, simple set the v.body to blank array.

var bdy = component.get("v.body");
bdy .set("v.body",[]);

How to specify the dependencies when you are creating a custom component dynamically

Suppose you have created a custom component like c:myCustomDialog and you want to create is dynamically and want to use in component say c:listComponent then you have to specify the c:myCustomDialog componet as a dependent component inside c:listComponent. This will ensure that the component and its dependencies are sent to client when its needed.

below is code snippet which we need to specify in c:listComponent component:

<aura:component>
                 <aura:dependency resource="markup://c:myCustomDialog"/>
</aura:component>

<aura:dependency> tag supports following attributes:

• resource : specify the dependent component which you will create dynamically
• type : type of resource component depends on. It can be COMPONENT, APPLICATION, EVENT. The default value is "COMPONENT".  You can specify type="*" to match all type of resources.

Hope this will help you all understand the basic of creating and destroying the components dynamically.

Looking forward for your comments and feedback!!!!

More Blogs>>: 

RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
FETCHING FILE FROM EXTERNAL/PUBLIC URL AND STORING IT IN SALESFORCE