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.

Answer 1

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);