Dynamically Creating Components Part 2:- Create and Destroy Modal Dialog Component

In our last post we talk about modal/popup on button click. But in this post we will Dynamically Instantiate the lightning component and Destroy the lightning component on button click. If you want to learn about $A.createComponent() . Please check our old post.

Problem :- Hide and Show Modal on button click
Solution :- We can do the same with help of CSS ,JavaScript and Aura:If but this time we will dynamically Instantiate the Lightning component on button Click and Destroy on button click with the help of $A.createComponent() .

Example 1) Show and Hide Modal Dialog Dynamically :-

Step 1) Create one Modal Component.

MyModalComponent.cmp

<aura:component >

    <div class="demo-only" style="height: 640px;">

        <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">

                <header class="slds-modal__header">

                    <lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{! c.RemoveMe }" 

                                          alternativeText="Close" class="slds-modal__close" />

                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">

                        Modal Header

                    </h2>

                </header>

                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                    <p>Salesforce Apex Hours</p>

                </div>

                <footer class="slds-modal__footer">

                    <button class="slds-button slds-button_neutral">Cancel</button>

                    <lightning:button variant="brand" label="Remove Me" title="Remove Me" onclick="{! c.RemoveMe }"/>

                </footer>

            </div>

        </section>

        <div class="slds-backdrop slds-backdrop_open"></div>

    </div>

</aura:component>

Create Modal Dialog Component with the help of SLDS.

MyModalComponentController.js

({

    RemoveMe : function(component, event, helper) {

         component.destroy();

    }

})

"component.destroy();" method is used to destroy the Lightning Component Dynamically.

Step 2) Now create one Component with button to create Component.

MainComponent.cmp

<aura:component >

     <div>

        <button class="slds-button slds-button--neutral" onclick="{!c.createModal}">Open Modal</button>   

        <!-- Modal will come here-->        

        <div aura:id="ModalDiv">

            {!v.body}

        </div>

    </div>

</aura:component>

In above code we create one Button and added action on button click to Instantiate the lightning componen. Also added one Div "<div aura:id="ModalDiv">" tag where modal will load.

MainComponentController.js

({

    createModal : function(component, event, helper) {

        $A.createComponent(

            "c:MyModalComponent",{},

            function(myModal){

                if (component.isValid()) {

                    var targetCmp = component.find('ModalDiv');

                    var body = targetCmp.get("v.body");

                    body.push(myModal);

                    targetCmp.set("v.body", body);            

                }

            }

        );

    },

})

Step 3) Create Application to Test Above Code.

<aura:application extends='force:slds'>

    <c:MainComponent />

</aura:application>

Example 2) Show and Hide Modal Dialog Dynamically with Component Communication

If you want to send some message in Modal and want to get some value back in main component from modal then we can do the same with the help of event. If you want to lean about about Event. Please check our old post.

Step 1) Create one event

MyModelEvent.evt

<aura:event type="COMPONENT" description="Event template" >

    <aura:attribute name="ModalMsg" type="String" />

</aura:event>

Create one event with one String Attribute.

Step 2) Update your modal Component.

MyModalComponent.cmp

<aura:component >

    <aura:attribute name="title" type="String" required="true"/>
    <aura:attribute name="msg" type="String" />   

    <aura:registerEvent name="sendMsg" type="c:MyModelEvent"/>

    <div class="demo-only" style="height: 640px;">

        <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">

                <header class="slds-modal__header">

                    <lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{! c.RemoveMe }" 

                                          alternativeText="Close" class="slds-modal__close" />

                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">

                        {!v.title}

                    </h2>

                </header>

                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                    <div class="row">
                        <lightning:input name="input1" value="{!v.msg}" label="Enter Message From Modal" />
                    </div>

                </div>

                <footer class="slds-modal__footer">

                    <button class="slds-button slds-button_neutral">Cancel</button>

                    <lightning:button variant="brand" label="Remove Me" title="Remove Me" onclick="{! c.RemoveMe }"/>

                </footer>

            </div>

        </section>

        <div class="slds-backdrop slds-backdrop_open"></div>

    </div>

</aura:component>

In above component we added two attribute. "title" to get value from other component. and "msg" to send value from Modal Component. And We also added "<aura:registerEvent" to register the Event.

MyModalComponentController.js

({

    RemoveMe : function(component, event, helper) {

        var cmpEvent = component.getEvent("sendMsg");
        cmpEvent.setParams( { "ModalMsg" : component.get("v.msg") } );
        cmpEvent.fire();

        component.destroy();

    }

})

Add the above selected code to fire the event.

Step 3) Handle the Event in Parent Component

MainComponent.cmp

<aura:component >

    <aura:attribute name="myTitle" type="String" />
    <aura:attribute name="MessageFromModal" type="String" />   

    <aura:handler name="sendMsg" event="c:MyModelEvent" action="{!c.handleComponentEvent}"/>
    <div>

        <div class="row">

            <lightning:input name="input" value="{!v.myTitle}" label="Enter Title for Modal" />

            <button class="slds-button slds-button--neutral" onclick="{!c.createModal}">Open Modal</button>   

        </div>

        <!-- Modal will come here-->        

        <div aura:id="ModalDiv">

            {!v.body}

        </div>

        <div class="row">
          Msg will Come here :---  {!v.MessageFromModal}
        </div>

    </div>

</aura:component>

Created two attribute, One "myTitle" to get value and "MessageFromModal" to send value in parent component. Also added the "<aura:handler" to handle the event.

MainComponentController.js

({

    createModal : function(component, event, helper) {

        $A.createComponent(

            "c:MyModalComponent",{

                "title": component.get("v.myTitle"),            },

            function(myModal){

                if (component.isValid()) {

                    var targetCmp = component.find('ModalDiv');

                    var body = targetCmp.get("v.body");

                    body.push(myModal);

                    targetCmp.set("v.body", body);            

                }

            }

        );

    },

    handleComponentEvent : function(cmp, event) {
        var accRec = event.getParam("ModalMsg");
        cmp.set("v.MessageFromModal", accRec);
    }   

})

If you want to send attribute in ModalComponent then set the attribute while creating component. We also added "handleComponentEvent " method to get value from Event.

Step 4) Test the changes in Application

<aura:application extends='force:slds'>

    <c:MainComponent />

</aura:application>

Please join our YouTube Channel. Please check below related post
1) Please check "<aura:dependency>" tag as well.
2) Component Event in Lightning Component | aura:event
3) Invoke Apex from Lightning Component
4) Design Resource In Lightning Component Bundle

Please provide your comment and feedback.

Thanks,
Amit Chaudhary