Example of component type event (aura:event type=”COMPONENT”) where passing the multiple attribute value from child component to parent component on click button in aura lighting component Salesforce | how to Get/Set component type event attribute value on click button in lightning component Salesforce

Hey guys, today in this post we are going to learn component event (aura:event type=”COMPONENT”) where passing the attribute value from Child Component to Parent Component on Click button in aura lighting component Salesforce.

Real time scenarios:- Create a component event in Salesforce lightning, and pass the event attribute value from child component to parent component on click button uses of register event and event handler.
After Get/Set the event attribute value, a Modal Popup should be open on parent component.

How to Communicate with Events in Lightning Aura Components

In the Aura Components programming model, events are fired from JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled.

Events are declared by the aura:event tag in a .evt resource, and they can have one of two types: component or application.

There are two type of event in lightning component in Salesforce

• Component Events:- A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. To know more details about Component Events, Click Here.
• 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. To know more details about Application Events, Click Here

Files we used in this post example (Component type event):-

parentComponentEventApp.app

Lightning Application

It is used for call the component to preview on browser.

childComponentEvent.cmp

Lightning Component

It is a child component and hold a click button.

childComponentEventController.js

JavaScript Controller File

It is used for click function to To get the component event attribute value and fire the event.

parentComponentEvent.cmp

Lightning Component

It is a parent component and call the event handler (aura:handler) actiion function in lightning component

parentComponentEventController.js

JavaScript Controller File

It is set the attribute value of event from child component to parent.

myComponentEvent.evt

Lightning Event

Creat a application event, It’s hold two attribute as string type value.

Live Demo >> To get source code live demo, Click Here..

Other related post that would you like to learn in lightning component.

Create a component type event. Use type=”COMPONENT” in the aura:event tag for an component event.

Step 1:- Create component type event : myComponentEvent.evt

From Developer Console >> File >> New >> Lightning Event

myComponentEvent.evt [Lightning Event]

Create Lightning Component

Step 2:- Create Lightning Component : childComponentEvent.cmp

From Developer Console >> File >> New >> Lightning Component

childComponentEvent.cmp [Lightning Component File]

Create JavaScript Controller

Step 3:- Create Lightning Component : childComponentEventController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

childComponentEventController.js [JavaScript Controller]

Create Lightning Component

Step 4:- Create Lightning Component : parentComponentEvent.cmp

From Developer Console >> File >> New >> Lightning Component

parentComponentEvent.cmp [Lightning Component]

Create JavaScript Controller

Step 5:- Create Lightning Component : parentComponentEventController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

parentComponentEventController.js [JavaScript Controller]

Create Lightning Application

Step 6:- Create Lightning Application : parentComponentEventApp.app

From Developer Console >> File >> New >> Lightning Application

Live Demo >> To get source code live demo, Click Here..

Further post that would you like to learn in LWC Create a Flyout Account, It will help you to grow make more money for a better living.

List your blog on Flyout and start making money for publishing sponsored content on your blog. Here’s the invite link. Get Started for Free

Check Out:- Earn Unlimited Everyday With This Trick:- Click Here

FAQ (Frequently Asked Questions)

Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Originally published at https://www.w3web.net on October 7, 2021.