1

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?

4
  • 2
    First thing to try is to replace new CustomEvent("onchange", with new CustomEvent("change", as the "on" prefix is only required in the HTML attribute. Though I see you have used "ononchange" there.
    – Keith C
    Apr 1, 2022 at 12:38
  • Does it work when the comp is dragged to LEX record/home/app page? I doubt it is related to the code you posted here. Can you try with commenting out everything else than console.log in listener & event fire in the child? Apr 1, 2022 at 17:46
  • Now that you have fixed the getter/setter code, you should do as @Bartheleway says - he's right, the detail attribute of the event expects an object. You have the classic 2+ bugs situation which makes fixes very difficult! Apr 4, 2022 at 17:45
  • I disagree, the getter/setter is not needed in this situation Apr 4, 2022 at 21:42

2 Answers 2

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.

1
  • 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. 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? Apr 4, 2022 at 14:30
1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .