LWC child can't fire event at its parent in community

Question

I have the following problem: I am trying to throw an event from a child component to its parent with this code:

HeaderNotifications.html

<div style="width:100%" data-name={obj.notification.Name} key={obj.notification.Name} class="notification" onclick={handleChnage}>
    <c-header-notification-item  notification={obj.notification} icon={obj.icon} url={obj.url} onclose={handleRemoveChild}></c-header-notification-item>
</div>

HeaderNotifications.js

@api progressValue;

handleChnage(event) {
  this.progressValue = Math.floor(Math.random() * 100);

  const selectedEvent = new CustomEvent("onchange", {
    detail: this.progressValue
  });
  
  // Dispatches the event.
  this.dispatchEvent(selectedEvent);
}

Parent.html

<div class="button-container" style="position:relative">
  <c-header-notifications notification-list={notificationList} ononchange={handleChild} user={user}></c-header-notifications>
</div>

Parent.js

@track progressValue = 0;

handleChild(event) {
  this.progressValue = event.detail;
}

I have followed an example from the official documentation to build this code, but after trying this and other examples, with different options inside the customEvent like setting true bubbles and composed, but still when firing the onclick event it never communicates with the parent event, even trying different names.

I have these components inside a community, in which the parent is a horizontal bar that acts as a menu, and headerNotification is a child component that appears and disappears depending on the mouse over an icon that has the parent.

Thank you very much in advance!

---

Thank you very much for your answer Caspar. I have tried the code you suggested, but everything is still the same :S. It still doesn't pass to the parent method, even though I changed the name of the event, as you recommended:

Childlwc.js

_progressValue = 0;

@api set progressValue(value) { this._progressValue = value; } get progressValue() { return this._progressValue; }

handleChnage(event) { this.progressValue = Math.floor(Math.random() * 100); const selectedEvent = new CustomEvent("changevalue", { detail: this.progressValue }); // Dispatches the event. this.dispatchEvent(selectedEvent); }

ParentLWC.html

When clicked, the whole flow still works but does not reach the parent method. Could it be that the parent component is missing something to give visibility to the events?

Answer 1

Your problem is probably not the event.

You are trying to set a value to progressValue which is immutable (you have annotated it with @api). When you do this, it causes an error and the event never gets sent.

Change progressValue to a getter/setter pair:

_progressValue = 0;
@api set progressValue(value) {
  this._progressValue = value;
}
get progressValue() {
  return this._progressValue;
}

You don't need to change any other parts of your code (except maybe renaming that event... so you don't need to listen for it as ononchange ;)

This will likely fix your issue.

Answer 2

I suggest you to read this documentation.

In my understanding, the error is just that you pass a value inside detail where it expect an object.

Could you try with this :

handleClicked (event) {
  this.progressValue = Math.floor(Math.random() * 100);

  // Dispatches the event.
  this.dispatchEvent(
    new CustomEvent("progresschange", {
      detail: {
        progressValue: this.progressValue,
      },
    })
  );
}

Then in your parent html:

<div class="button-container slds-is-relative">
  <c-header-notifications 
    notification-list={notificationList}
    onprogresschange={handleProgressChanged} 
    user={user}
  ></c-header-notifications>
</div>

And parent.js

handleProgressChanged (event) {
  this.progressValue = event.detail.progressValue;
}

I would highly recommend to:

• not use the change event which is triggered by input element
• try to fix the spelling hadnleChnage to handleChange
• try to improve the indentation
• do not use a style attribute
• use better naming