Angular2-toaster thinks two toasts are duplicate?

Question

I'm using the angular2-toaster, and trying to understand why 2 toasts, with different messages, are being considered "duplicate" toasts, and therefore only 1 toast is appearing. I would like both toasts to appear.

I have this code:

var toast: Toast = {
  type: 'error',
  title: "one toast, from one dev to another",
};
var toast2: Toast = {
  type: 'error',
  title: "another toast, yo!",
};

this.toasterService.pop(toast);
this.toasterService.pop(toast2);

And in a separate file, I have this toaster config:

this.config = new ToasterConfig({
  positionClass: "toast-top-center",
  timeout: 10000,
  newestOnTop: true,
  tapToDismiss: true,
  preventDuplicates: true,
  animation: "fade",
  limit: 3,
});

What about these toasts is "duplicate", except for the type?

Answer 1

This component checks on toastId and body for duplicates.

source code:

if (this.toasterconfig.preventDuplicates && this.toasts.length > 0) {
  if (toast.toastId && this.toasts.some(t => t.toastId === toast.toastId)) {
    return;
  } else if (this.toasts.some(t => t.body === toast.body)) {
    return;
  }
}

Since your toasts have no body, they match and fail the duplicate check.

var toast: Toast = {
  type: 'error',
  title: 'one toast, from one dev to another',
  body: 'test'
};
var toast2: Toast = {
  type: 'error',
  title: 'another toast, yo!',
  body: 'test2'
};
this.toasterService.pop(toast);
this.toasterService.pop(toast2);

This should work.

Answer 2

I agree with digitalkoi's answer.

Just a little addition, if you want to use toasts without body, you also can setup preventDuplicates to false.

this.config = new ToasterConfig({
  positionClass: "toast-top-center",
  timeout: 10000,
  newestOnTop: true,
  tapToDismiss: true,
  ★preventDuplicates: false,
  animation: "fade",
  limit: 3,
});