Lightning Application Events
Introduction
In this blog post, I am going to explain how to use the application events.Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All
components that provide a handler for the event are notified.But its good practice to use the component events whenever possible instead of application events.Create an application event contains there steps
Step 1: Create an Application event
Create a new application event with below code as shown below. appEvent.evt
|
1 2 3 |
<aura:event type="APPLICATION"> <aura:attribute name="message" type="String"/> </aura:event> |
Step 2: Register an Event
A component registers that it may fire an application event by using <aura:registerEvent> in its markup. The name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name=”</aura:appEvent” but the value isn’t used anywhere.
|
1 |
<aura:registerEvent name="appEvent" type="c:appEvent"/> |
Step 3 : Fire an Event
Use $A.get(“e.myNamespace:myAppEvent”) in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace.
|
1 2 3 |
var appEvent = $A.get("e.c:appEvent"); appEvent.setParams({ "myParam" : myValue }); appEvent.fire(); |
Put All together
Now lets put all together to understand the application events.Here below is the component which will trigger the application events.
AppNotifier.cmp
|
1 2 3 4 5 6 7 8 9 10 11 |
<aura:component> <b> Notifer Component</b> <p> Please Enter the text and then Click here to fire button </p> <ui:inputText aura:id="inpId" value="This is Really cool ..!" required="true"/> <aura:registerEvent name="appEvent" type="c:appEvent"/> <p><lightning:button label="Click here to fire an application event" onclick="{!c.fireApplicationEvent}" /> </p> </aura:component> |
|
1 2 3 4 5 6 7 8 9 |
({ fireApplicationEvent : function(cmp, event) { var appEvent = $A.get("e.c:appEvent"); var inpText = cmp.find("inpId").get("v.value"); appEvent.setParams({ "message" :inpText }); appEvent.fire(); } }) |
|
1 2 3 4 |
.THIS{ color: #2f5687; font-size:20px; } |
AppHandler.cmp
AppHandler is component that will handle the event notification which is fired from the AppNotifer component and handle them
|
1 2 3 4 5 6 7 |
<aura:component > <hr/> <b> Handler Component</b> <aura:attribute name="messageFromEvent" type="String"/> <aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}"/> <p>{!v.messageFromEvent}</p> </aura:component> |
|
1 2 3 4 5 6 |
({ handleApplicationEvent : function(cmp, event) { var message = event.getParam("message"); cmp.set("v.messageFromEvent", message); }, }) |
|
1 2 3 4 |
.THIS{ color: #FF5733; font-size:20px; } |
AppContainer.cmp
|
1 2 3 4 5 |
<aura:component > <c:AppNotifier/> <c:AppHandler/> </aura:component> |
