Limited usage of custom components

[degloman]

Information

Currently, there's an issue with using custom components because it’s impossible to access their instance. For example, if we want to extend the functionality of this component (Stackblitz) by adding a "Revert" button with an action, we might try adding action=output<void>(). However, we won’t be able to listen to this event anywhere because we don’t have access to the instance of our custom component.

This limitation is visible in the main example as well, we are unable to react on the "Close" button press externally in any way.:

<!-- HTML -->
<ngx-sonner-toaster richColors closeButton />

// TypeScript
toast.custom(HeadlessToast);

// With props:
toast.custom(HeadlessToastComponent, {
  componentProps: {
    eventName: 'Louvre Museum'
  }
});

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No