Calling Aura Event in LWC

apexlightning-eventslightning-web-components

I have a simple Aura component which is registering a managed package event and then firing it.

I need to call this custom_app:LoadAppEvent from lwc component instead from an Aura component. is there a way ?

I checked the Migrate Event documentation and you can use dispatchEvent instead of loadAction.fire() but it doesn't mention anything about how can we work with an managed package event.

this.dispatchEvent(loadAction);

Aura Code to fire the event:

controller.html

 <aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:registerEvent name="LoadAppEvent" type="custom_app:LoadAppEvent"/>
         <aura:handler name="init" value="{! this }" action="{! c.onInit }" />
    </aura:component>

controller.js

onInit : function(component, event, helper) {
   var loadAction = $A.get('e.custom_app:LoadAppEvent');
   loadAction.setParams({
         param1: "param1", 
         param2: "param2" 
   });
   loadAction.fire();
}

Best Answer

You can only dispatchEvent up to the first Aura component, done via an event handler.

<!-- Parent Aura markup -->
<c:myLwcComponent onloadappevent="{!c.handleLoadAppEvent}" />

...

// Child LWC Controller code
this.dispatchEvent(new CustomEvent('loadappevent', { detail: blahblahblah }));

You can also use LMS to have a type of "Aura Application Event," if that is your intent, and the package supports it.

To communicate from the managed code to your own LWC, you must wrap the LWC in an Aura component then call an @api-enabled method or use LMS. To communicate from your own LWC to the managed package, you must use the dispatchEvent method shown above, or LMS to Aura, and have it fire the proper event.

Related Solutions

[SalesForce] LWC Event handler for event type with underscores

If you want to handle an event type sampleevent in HTML of parent, you should directly add prefix in attribute onsampleevent.

But, You cannot add event handler in HTML with underscores _ as it will not compile.

However, you can do it through JS of parent component:

I would recommend not to create event-types with underscores as it may not even be supported from javascript in future releases (although currently it is able to handle)

connectedCallback() {
    this.template.addEventListener('toggle_edit_asset', this.handleToggle);
}
handleToggle(e) {
    console.log('toggle_edit_asset handled');
}

This is Playground link

This will work but you will be getting warning in the console as below:

[LWC warning]: Invalid event type "toggle_edit_asset" dispatched in element . Event name should only contain lowercase alphanumeric characters.

IMPORTANT

You need to add bubbles:true in event as you need to Bubble an event up inside the containing component’s template.

toggleEditAsset = () => {
    const event = new CustomEvent('toggle_edit_asset', { bubbles: true });
    this.dispatchEvent(event);
};

LWC – Pass event to Aura Component

try sending your data using the detail property on the event's payload, something like this:

const selectedEvent = new CustomEvent('testevent', { detail: { testMessage: 'Hi there' }});

instead of this:

const selectedEvent = new CustomEvent('testEvent', { testMessage: 'Hi there' });

as you can see on Send Events to an Enclosing Aura Component article. Also, one of the suggested best practices is to avoid upper cases on the event's name, as described in the Create and Dispatch Events article.

Hope it helps.

Best Answer

Related Solutions

[SalesForce] LWC Event handler for event type with underscores

LWC – Pass event to Aura Component

Related Topic