Saturday, May 18, 2019

Application event in lightning component

Application event are the event handle by any component no matter what relationship between them but they should be inside single application.

Application Event: (Name=AppEvent)

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

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


</aura:event>

Child Component: (Name=ChildComp) 

<aura:component >
    <aura:registerEvent name="regInChild" type="c:AppEvent"/>
    <aura:attribute name="textMessage" type="String" default="Part from child comp"/>
    <lightning:button label="Click To Fire" onclick="{!c.doHandleEvent}"/>

</aura:component>

Javascript controller:

({
doHandleEvent : function(component, event, helper) {
        var aeEvent=$A.get("e.c:AppEvent");
        aeEvent.setParams({
            storeMessage : component.get("v.textMessage")
            
        });
        aeEvent.fire();
}

})

Parent Component: (Name=ParentComp)

<aura:component >
    <aura:handler  event="c:AppEvent" action="{!c.doHandleFromChild}"/>
    <aura:attribute name="parentMessage" type="String" />
    {!v.parentMessage}

</aura:component>

Javascript controller:

({
doHandleFromChild : function(component, event, helper) {
        var valueFromEvent=event.getParam("storeMessage");
        component.set("v.parentMessage",valueFromEvent);

}

})

Application:

<aura:application extends="force:slds" >
    <c:ParentComp/>
    <c:ChildComp/>

</aura:application>


Application event in lightning component

No comments:

Post a Comment