1

i would like to call an Application event in Lightning web component. Below link describes the same in AURA.

https://developer.salesforce.com/docs/atlas.en-us.218.0.lightning.meta/lightning/events_application_example.htm

and when im trying with pubsub,i am not able to deploy. Below syntax i have used:

import { fireEvent } from 'c/pubsub';
  • Article you've mentioned is about Application event in aura components, not web components. Also your question and code is not sufficient to provide any pointers. – Raul May 24 '19 at 10:49
4

This is a note from the Lightning Web Components documentation, on the "Migrate Events" page:

There's no direct equivalent in Lightning web components for application events in Aura components. Application events can be problematic in complex apps because any component can handle the event. This pattern can lead to code that is hard to maintain.


This is how you do it in LWCs:

Instead of event.fire() in an Aura component, use this.dispatchEvent(myEvent), which is a standard DOM method, in Lightning web components.

For example, if your component has a list of card consisting of contact components, and you want them to be highlighted when selected:

You would have a tag with a onclick, for example, that points to your handler in your component:

<a href="#" onclick={selectHandler}>
   ...
</a>

When the user clicks on that, the component's selectHandler method will be called:

selectHandler(event) {
    // Prevents the anchor element from navigating to a URL.
    event.preventDefault();

    // Creates the event with the contact ID data.
    const selectedEvent = new CustomEvent('selected', { detail: this.contact.Id });

    // Dispatches the event.
    this.dispatchEvent(selectedEvent);
}

Then, in another place of your application, you will have another component that handles that 'selected' event:

<c-contact-list-item key={contact.Id} contact={contact} onselected={contactSelected}></c-contact-list-item>

That component will then handle the event and act accordingly:

contactSelected(event) {
    const contactId = event.detail;
    this.selectedContact = this.contacts.data.find(contact => contact.Id === contactId);
}

If you want to fire an application event from a Lightning Web Component, but want an Aura Component to handle, you'll have to use a wrapper for it (that is, put your LWC inside an Aura Component). It would be a similar approach: you fire the event from your LWC, handle it on your Aura Component, using the on approach. Check this question for further reference on this: Force refresh view in LWC.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.