Lightning Events - Component Events

Hey Guys ,

In my previous post we have seen how to pass value from Parent to Child. Now lets see how you can pass value from Child to parent.

Lightning Event : There are 2 types events and they are 'COMPONENT' and 'APPLICATION' event.

1st we will see how COMPONENT event works and here we will reuse the same components which you created in previous blog.

Think like this. There is a child component(ChildComp1_PC1) which updates some value and you need that updated value in the parent component(ParentComp1).        

       You are gonna remember these steps, 

       Step 1: Create an event

       Step 2: Register that event in component (in our scenario we will register in child comp).

       Step 3: When the event is fired, have a logic to capture that event.

so first you will create an event and register that in a child component (cause it is the one who is going to fire in order to send some values to it's parent ) so registering the event in child will be next step. Later in child component's controller you will set the parameters (or i would say attributes) and fire the event. YOU ARE ABOUT TO FIRE AN EVENT !!! Bang !!!

       Now who will catch the event which you just fired ?? That will be our Parent Component. So how the magic happens ?

No secrets here!! We will set a watch dog in Parent component which will look for the event to be fired and do the action. Enough of reading huh ?? lets see that in action.

create a COMPONENT event: To do that you will do this. Developer Conole =>File =>New=>Lightning Event and name it as MyEventTest.

For content inside the event refer the screenshot.  The important descriptions are given in the comment section itself.

 Now register this event in the component which is firing. In our scenario, this will be fired from Child comp and as i mentioned we need to register the same.

If  you observe the code, <aura:registerEvent name="eventFromChild" type="c:MyEventTest"/>

attribute Name - This could be anything

Attribute Type - c:MyEventTest where c: is a Namespace and MyEventTest is a the name of the event i created in previous step.

Now lets get into action. create button and fire the event.  For the you need to create a controller.js and refer the content in the pic.

We fired the event. now who is going to catch ? Remember I said something about watch dog ??Lets see it in action.

So what action={!c.getValuesFromEvent} from the above screen shot is doing ? Our Watch dog has caught the event but what now ? how to process the values that are being set in the event container?? . That is what our controller.js method of parent component does. Refer the code from pic.

Final Moment has arrived. Let see how the App is defined and the how the result will look like.

And the result is self explanatory !! :)

For more info subscribe this blog and keep an eye on this blog. I will update some other usage of Component event and Application event.