Show toastrs after the previous toastr is dismised

Question

I have multiple messages. I want to show next toastr after the toastr is dismissed. I write the following codes:

this.messages.forEach(msg=>{
  this.toastr.info(msg.Text, 'Title', 
  {
    positionClass: 'toast-top-right',
    closeButton: true,
    disableTimeOut: true,
  });
});

But all of my messages are appeared at the same time.

Here is what I want to:

Only one message appear on the screen, and then after dismissing the message, the next message will be shown.

Create a service, which has a queue, where you can push the type of notification you wish to show, for e.g., `{ type: "error", msg: "Any msg" }`, create a flag in the service to determine if the notifications are being shown from the queue, use that in the method that's used for pushing to queue, to determine if we need to pop one off and start showing, with that [configure callback on toastr options](https://github.com/CodeSeven/toastr#callbacks) such that it checks the queue before closing/hiding to show the next one. Should work imo. — 0xts, Aug 07 '23 at 08:09

MB_18 · Accepted Answer · 2023-08-08T06:18:42.847

To display toastr messages sequentially, I write the following method:

displayNextMessage(messages, index) {
  if (messages !== undefined && index < messages.length) {
    const msg = messages[index];
    
    this.toastr.info(msg.Text, 'Title', {
      positionClass: 'toast-top-right',
      closeButton: true,
      disableTimeOut: true,
    }).onHidden.pipe(take(1))
    .subscribe(() => this.displayNextMessage(messages, index + 1));
  }
}

To call the method:

displayNextMessage(messages, 0);

score 0 · Answer 2 · answered Aug 08 '23 at 06:21

You can use a combination of toastr events and recursive function calling to achieve this behavior.

function showMessage(messages, index) {
  if (index < messages.length) {
    const toastrInstance = this.toastr.info(messages[index].Text, 'Title', {
      positionClass: 'toast-top-center',
      closeButton: true,
      disableTimeOut: true,
      onHidden: () => showMessage(messages, index + 1) // Call the next message when this one is hidden
    });
  }
}

// Call the function with the messages array and starting index 0
showMessage(this.messages, 0);

score -1 · Answer 3 · answered Aug 07 '23 at 10:17

To show toastrs one after another, waiting for each toastr to be dismissed before showing the next one, you can use a recursive approach. Here's how you can achieve this:

// Assuming you have an array of messages
this.messages = [
  { Text: 'Message 1' },
  { Text: 'Message 2' },
];

// Function to display toastr messages recursively
displayToastr(index: number) {
  if (index < this.messages.length) {
    const msg = this.messages[index];
    this.toastr.info(msg.Text, 'Title', {
      positionClass: 'toast-top-center',
      closeButton: true,
      disableTimeOut: true,
      onHidden: () => {
        this.displayToastr(index + 1); // Show the next toastr after the current one is dismissed
      }
    });
  }
}

// Call the function to start displaying toasters
this.displayToastr(0);

This code snippet defines a recursive function displayToastr that takes an index as a parameter. It displays the toastr at the given index and, when that toastr is dismissed (hidden), it calls itself with the next index to show the next toastr in the array.

With this approach, only one toastr will be displayed at a time, and the next one will be shown only after the previous one is dismissed.

Show toastrs after the previous toastr is dismised

3 Answers3