How could I change the text after I get the response asynchronously?

  var swText = "<h3>Importiranje kvota, molimo sačekajte...</h3>";
  swal({ html: swText });
  swal.showLoading();
  this.koloService.importExcelFileWithOdds(this.brojKola, fileList)
      .subscribe(
          data => { swText = "<h3>Importiranje završeno!</h3>"; swal.hideLoading(); },
          error => {  swText = "<h3>Importiranje završeno!</h3>"; swal.hideLoading(); });

Also, how could I hide the progress alert after I get the response from server? The progress alert looks like this while the data is being imported:

And after I get the response from the server, progress alert doesn't hide, there is just an OK button which will close the alert - I want it to close as soon as I get the response from the server.

How could I change the text after I get the response asynchronously?

  var swText = "<h3>Importiranje kvota, molimo sačekajte...</h3>";
  swal({ html: swText });
  swal.showLoading();
  this.koloService.importExcelFileWithOdds(this.brojKola, fileList)
      .subscribe(
          data => { swText = "<h3>Importiranje završeno!</h3>"; swal.hideLoading(); },
          error => {  swText = "<h3>Importiranje završeno!</h3>"; swal.hideLoading(); });

Also, how could I hide the progress alert after I get the response from server? The progress alert looks like this while the data is being imported:

And after I get the response from the server, progress alert doesn't hide, there is just an OK button which will close the alert - I want it to close as soon as I get the response from the server.

• javascript
• angular
• sweetalert2

• 2 "destroying the initial swal and creating a new one in your data and error response handling part of your response" is an option for your case? – Noxthron Commented Feb 5, 2018 at 8:50
• Could use that I guess in this use case, but is there a functionality to change the text without destroying the swal? – Željko Krnjić Commented Feb 5, 2018 at 9:07
• @ŽeljkoKrnjić any luck, i am having similar problem. – Deep 3015 Commented Mar 10, 2019 at 13:25

2 Answers 2

Update (2022): use Swal.update() method:

Swal.fire('After mignight I will turn into a pumpkin')
swal.showLoading()

// change the title after 2 seconds
setTimeout(() => {
  Swal.update({ title: 'I am a pumpkin now!' })
  Swal.hideLoading()
}, 2000)

<script src="https://cdn.jsdelivr/npm/sweetalert2@11"></script>

There are all kinds of getters for accessing different parts of SweetAlert2: https://sweetalert2.github.io/#methods

You are looking for Swal.getTitle():

Swal.fire('After mignight I will turn into a pumpkin')
swal.showLoading()

// change the title after 2 seconds
setTimeout(() => {
  Swal.getTitle().textContent = 'I am a pumpkin now!'
  Swal.hideLoading()
}, 2000)

<script src="https://cdn.jsdelivr/npm/sweetalert2@11"></script>

My answer has nothing about Angular2 but a simple solution to keep in mind, in Swal options you can do this

confirmButtonText: (() => {
   if (your_data) {
     return "something"
   } else return "something else"
})()