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

1) Invoke Apex from Lightning Component

2) Design Resource In Lightning Component Bundle

Please check below post for more detail

1) https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application_example.htm

Thanks,

Amit Chaudhary

  @amit_sfdc    #SalesforceApexHours    @ApexHours

  Salesforce Apex Hours