How to Communicate Between two Lightning Components using Events?

How to Communicate Between two Lightning Components using Events?

Event :

An event can be something the browser does, or something a user does.

Lightning framework uses event driven programming. Handlers are written for interface events and they handles the events as they fire. In Lightning framework events are triggered from client side JavaScript controller actions. The attributes in an event could be set before the event gets trigerred and read only when the event is handled.

In Lightning framework events are declared by the aura:event tag in a .evt resource. Events can be of two types :

  1. Component Events:A component event can be triggered from an instance of a component and can be handled by the component that triggered it or by any other component in the hierarchy that recieve the event.
  2. Application Events:An application event is fired by an instance of a component and all the components that provide handler for the event are notified.

Steps to communicate between two lightning components using events:

  1. Create an event.
  2. Create two lightning component : Child component and parent component.
  3. Register the event in child component and fired the event in child component JavaScript controller action.
  4. Handle the event in parent component.

A snippet of code for the lightning Event:


<aura:event type="COMPONENT">
<aura:attribute name="message" type="String" default="“”/"></aura:attribute> // attribute of event
</aura:event>

A snippet of code for the child component:

<aura:component>
<aura:registerevent name="componentEventFired" type="c:CustomEvent"></aura:registerevent>// Event is being register in child component
<ui:button label="EventFire" press="{!c.fireComponentEvent}"></ui:button>// Event will fired on click of this button
</aura:component>

A snippet of code for the child component JavaScript controller :

({
fireComponentEvent : function(cmp, event, helper) {
var compEvents = cmp.getEvent("componentEventFired");// getting the Instance of event
compEvents.setParams({ "message" : "Child Event Fired" });// setting the attribute of event
compEvents.fire();// firing the event.
}
});

A snippet of code for the parent component :

<aura:component controller="AccountLight">
<aura:handler name="componentEventFired" event="c:CustomEvent" action="{!c.handleEvent}"></aura:handler>// Handler for custom event
<aura:attribute name="ParentAttribute" type="String" default="”"></aura:attribute>//Attribute of parent component
The ValueOf Attribute is {!v.ParentAttribute}
</aura:component>

A snippet of code for parent component Javascript controller :

({handleEvent : function(component, event, helper) {
var name =event.getParam("message");// getting the value of event attribute
console.log('name:::'+JSON.stringify(name));
component.set("v.ParentAttribute",name); // Setting the value of parent attribute with event attribute value
}
})

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?