clicking on confirm button closes the swal

Question

hitting the confirm button closes the swal is this an expected behaviour? If so how can I implement the loading example shown in the examples? my swal code is

<swal #saveSwal
title="Are you sure?"
text ="Do you want to save changes"
cancelButtonColor="#d33"
showCancelButton="true"
cancelButtonText="No! Review"
confirmButtonColor="#3085d6"
confirmButtonText='Yes, Save progress'
(confirm)="save()"
[showLoaderOnConfirm]="true"

[focusCancel]="true">

is there a way to keep the swal open and show the loading animation untill an async operation is compleeted ?

Answer 1

You also need to set the preConfirm property along with showLoaderOnConfirm to perform an async call and keep the alert open. Instead of mentioning all the configuration options for sweetalert in the HTML , it's better to create a property in the component class of type SweetAlertOptions and then use property binding with the [options] @Input decorator provided with the <swal></swal> component.

For this you have to import SweetAlertOptions like below

import swal,{ SweetAlertOptions } from 'sweetalert2';

I have also created a button to open the alert manually in component class and used .then() to show the success message once the async operation is done.I have used ViewChild and imported SwalComponent for this.

Code for component class

app.component.ts

import { Component, ViewChild} from '@angular/core';
import swal,{ SweetAlertOptions } from 'sweetalert2';
import { SwalComponent } from '@toverux/ngx-sweetalert2';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  public alertOption:SweetAlertOptions = {};
  @ViewChild('saveSwal') private saveSwal: SwalComponent;

  constructor(){
    this.alertOption = {
      title:"Are you sure?",
      text:"Do you want to save changes",
      cancelButtonColor:"#d33",
      showCancelButton:true,
      cancelButtonText:"No! Review",
      confirmButtonColor:"#3085d6",
      confirmButtonText:'Yes, Save progress',
      showLoaderOnConfirm:true,
      focusCancel:true,
      preConfirm: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("Doing async operation");
        resolve()
      }, 5000)
    })
  },
  allowOutsideClick: () => !swal.isLoading()
    }
  }

  showAlert(evt:any){
    this.saveSwal.show().then(() => {
      swal({
      type: 'success',
      title: 'Ajax request finished!'
    })
   })
  }
  save(){
    console.log("data saved");
  }
}

HTML file

app.component.html

<swal #saveSwal
(confirm)="save()"
[options]="alertOption"
>
</swal>

<button (click)="showAlert($event)">Click here</button>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

@NgModule({
  imports:      [ BrowserModule, FormsModule, SweetAlert2Module.forRoot()],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

with this code , the alert will remain open with the loader until the async call is done and then the success message will be displayed.

Working demo : https://stackblitz.com/edit/angular4-ifaa17?file=app%2Fapp.component.ts