CODEWITHSUNDEEP
javascriptangularsweetalert2
Željko Krnjić
Željko Krnjić

Reputation: 2366

Sweetalert2 - change displayed text dynamically - Angular2

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: enter image description here

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. enter image description here

Upvotes: 1

Views: 7523

Answers (2)

dogakorkmaz
dogakorkmaz

Reputation: 129

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"
})()

Upvotes: 0

Limon Monte
Limon Monte

Reputation: 54389

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.net/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.net/npm/sweetalert2@11"></script>

Upvotes: 5

Related Questions