Thursday, 6 September 2018

Component Event in Lightning Component | Lightning Component Communication With EVENT | aura:event



In this post we will talk about Component Event in Lightning Component. To use Component Event we need to perform below steps

1) Create Event Component 

2) Register the Event ( in Child Component )



3) Fire the Event ( from Child Component)




4) Handle the Event (In Parent Event)





Here is Code For you 


Component Event
AccEvent
<aura:event type="COMPONENT">
    <aura:attribute name="AccRecord" type="Account"/>
</aura:event>

Notifier Component
<!-- c:AccNotifier -->
<aura:component>
    <aura:attribute name="newAccount" type="Account"
              default="{ 'sobjectType': 'Account','Name': 'Test Name'}"/>
    <aura:registerEvent name="cmpAccEvent" type="c:AccEvent"/>
    <p>
        <form class="slds-form--stacked">        
            <lightning:input aura:id="newAccountform"
                            label="Account Name" name="AccAction"
                            value="{!v.newAccount.Name}" />

            <lightning:button label="Add Acc"
                            class="slds-m-top--medium"
                            variant="brand"
                            onclick="{!c.fireComponentEvent}"/>
        </form>
    </p>
</aura:component>
/* AccNotifierController */
({
    /* AccNotifierController */
    fireComponentEvent : function(cmp , event) {
        var cmpEvent = cmp.getEvent("cmpAccEvent");
        // Get the value from Component and set in Event
        cmpEvent.setParams( { "AccRecord" : cmp.get("v.newAccount") } );
        cmpEvent.fire();
    }
})

Handler Component

<aura:component>
    <aura:attribute name="AccListFromEvent" type="Account[]"/>  
    <!-- Note that name="cmpAccEvent" in aura:registerEvent in AccNotifier.cmp -->
    <aura:handler name="cmpAccEvent" event="c:AccEvent" action="{!c.handleComponentEvent}"/>        <!-- handler contains the notifier component -->
    <c:AccNotifier />
    <!-- Disply Record -->
    <div>
        <lightning:card title="List Account">
            <p class="slds-p-horizontal--small">
                <aura:iteration items="{!v.AccListFromEvent}" var="acc">
                    <br/>
                    {!acc.Name}
                </aura:iteration>
            </p>
        </lightning:card>
    </div>
</aura:component>

/* AccHandlerCMPController.js */


({
     /* AccHandlerCMPController.js */
    handleComponentEvent : function(cmp, event) {
        // Get value from Event
        var accRec = event.getParam("AccRecord");
        // Get the List of Existing Account ListOfAcc
        var ListOfAcc = cmp.get("v.AccListFromEvent");
        // Add Record in List
        ListOfAcc.push(accRec);
        // set the handler attributes based on event data
        cmp.set("v.AccListFromEvent", ListOfAcc);
    }
})

Please check below post

Please check below post for more detail
Thanks,
Amit Chaudhary

6 comments:

  1. Thank you Amit for this post, it's so cool, ,just my opinion- why we need this Event(comp/App level).It would be great if you can describe concept-wise

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Nice Explanation. Keep it up.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. I just copied the files with the correct names. It didn't work.

    ReplyDelete