Search code examples
angulartypescripttoastr

Update text in Angular Toastr

I would like to change the toastr text already displayed.

I am using the following code to create and trying to update the existing text.

  if (this.toastr.currentlyActive > 0) {
    this.toastr.toasts.find(toast => toast.toastId == 1).message = "Tempo em Atendimento: " + tempoAtendimento;
  } else {
    this.toastr.info("Tempo em Atendimento: " + tempoAtendimento, "", { timeOut: 0, extendedTimeOut: 0 });
  }

I do not receive error message, however, the text is not changed! Any tips?

enter image description here

I am using: https://github.com/scttcper/ngx-toastr/ Versão: 10.1.0

Solution 
  • this.toastr.toasts.find(toast => toast.toastId == 1)

    will return ActiveToast object and changing the message property on the ActiveToast object would not effect the component itself.

    To change the message on the displayed component you need reference to the component object. So that you could update the message property directly on the component itself. You can easily get the reference to the instance of the component from the ActiveToast object by

    let _componentInstance = this.toastr.toasts.find(toast => toast.toastId == 1).toastRef.componentInstance

    then simply modify the message property on _componentInstance to whatever you want like.

    _componentInstance.message = "new message"