Events in Lightning Components

Events in Lightning Components

Event can be defined as an action done either by browser or by user himself. Aura framework is an event driven architecture.In order to use the benefit of aura event architecture, you need to declare a manual event with whatever attributes you want to carry forward, this event is registered in a component whose controller will fire it upon any user action and finally handled by another component and made to do specific actions.

The event is declared by the aura:evt tag in .evt resource file along with its attribute(s). For example:-

>

 

default=”HELLO” />

 
 

Did you notice “COMPONENT TYPE” string in above code? Events in aura are categorized into two different types as follows:-

These are special events and recommended to use. Declared with type Component, component events are fired by the instance of a component that can be handled by component itself or by any other component that contain it.

Application event follow traditional publish subscribe model, where an event is fired all the components are notified that have handler for the event.

For better understanding, let’s consider the below example:- 

event architecture in lightning

If an application event is fired through any user action in Component 1, if Component 2 has its handler then it will be notified immediately. However, in order to protect your event, if you register a component event in Component 3, then only Component 1 can be notified.

Enough with the words, let’s jump into the action:-

For now , we will discuss component event. We will be dealing with only Component 2 and Component 3 for now. In the next blog, we will discuss about application event, then we will code Component 1, which will communicate with Component 2.

Befor we proceed, let’s declare an event “DemoEvent.evt

<aura:event type=”Component” description=”Event template” >

  <aura:attribute type=”String” default=”Salesorce” name=”carryFrwrd” />  

</aura:event>

We will follow same diagram, let’s creata a child component(Component3),

Component3.cmp

<aura:component >

    <aura:registerEvent name=”nameChanged” type=”c:DemoEvent” />

    <lightning:input placeholder=”change this…” aura:id =”txtBox”  class=”slds-input slds-size_1-of-2″ onchange=”{!c.myCntrlrMethod}”></lightning:input>

</aura:component>

In Component3, we have registered the event “DemoEvent” and declare an input box which will call its controller method “myCntrlrMethod“. Let’s see controller of Component3:- 

Component3Controller.js

({

myCntrlrMethod : function(component, event, helper) {

var cmpEvent = component.getEvent(“nameChanged”); 

        //Set event attribute value

        cmpEvent.setParams({“carryFrwrd” : component.find(“txtBox”).get(“v.value”)}); 

                cmpEvent.fire(); //fire the event to notify parent

}

 

})

The method “myCntrlrMethod ” grabs the input texbox vale and sets it to DemoEvent attribute “carryFrwrd” and later DemoEvent is fired. Now this event will be handled by Component2(Parent of Component3).

Component2.cmp

<aura:component >

    <aura:attribute type=”String” name=”handledval” />

    <aura:handler name=”nameChanged” event=”c:DemoEvent” action =”{!c.setVal}” />

    <c:Component3 />

    Welcome  {!v.handledval}

 

</aura:component>

Component2Controller.js

({

setVal : function(component, event, helper) {

        var gotName=event.getParam(“carryFrwrd”);

        component.set(“v.handledval”,gotName);

}

 

})

Whenever the vale is changed in input box, the event is fired from Component3, which is further handled by Component2, which calls its controller method “setVal“. This method sets the attribute value “handledval” to the value received by DemoEvent.

The final app looks like below:- 

 

This was all about component event.You can read about Application events here

(Visited 263 times, 1 visits today)

Leave a Reply