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

[pimenovoleg]

@tutkli

Is it possible to close a custom toast?
Perhaps there's a way to obtain the toastRef in order to call the dismiss method?

[AndrewKoliaka]

I have the same issue

[tutkli]

Hi, first of all sorry for the late response.
Currently, to render a custom component we are using ngComponentOutlet with the inputs being the toast's componentProps.
Maybe instead of these props we could pass the toast itself as an input to fix this issue.

[akbarsaputrait]

hi @tutkli i did that your suggest, take a look below:

toast.custom(ToastDotsComponent, {
      componentProps: {
        title: 'Error Type',
        description: 'This is the description',
        type: 'error',
        toast
      },
    });

// Inside "ToastDotsComponent"

toast = input.required<typeof toastState>();

close() {
  toast.dismiss(); // How can i close single toast instead of dismiss all?
}

[akbarsaputrait]

oops, this is work btw:

toast.custom(ToastDotsComponent, {
      componentProps: {
        title: 'Error Type',
        description: 'This is the description',
        type: 'error',
        toastId: 'error-toast', // also pass to the custom component
        toast
      },
      id: 'error-toast', // pass your own custom id
});

// Inside "ToastDotsComponent"

toast = input.required<typeof toastState>();
toastId = input.required<string>();

close() {
  this.toast().dismiss(this.toastId());
}

cc @tutkli @pimenovoleg @AndrewKoliaka

[pimenovoleg]

oops, this is work btw:

toast.custom(ToastDotsComponent, {
componentProps: {
title: 'Error Type',
description: 'This is the description',
type: 'error',
toastId: 'error-toast', // also pass to the custom component
toast
},
id: 'error-toast', // pass your own custom id
});
// Inside "ToastDotsComponent"

toast = input.required();
toastId = input.required();

close() {
this.toast().dismiss(this.toastId());
}
cc @tutkli @pimenovoleg @AndrewKoliaka

Oh wow, it really does work! 🎉
Also, don’t forget about auto-generating an incremental ID.

Maybe we should add some customization examples to the docs?
@tutkli, if you're ok with that, could you create a issue where we can submit a PR? 🙌

[tutkli]

Thank you @pimenovoleg , here you go #35