Working with angular5, I'm trying to use SweetAlert for delet option in my code, but I'm getting some error:
I'm using the same function as in the official link
This is the code in .ts
import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.scss']
})
export class ClientsComponent implements OnInit {
pageClients:any;
ngOnInit() {
this.doSearch();
this.getAllClientsList();
}
delete(p:Clients){
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
this.clientService.deleteClient(p.id)
.subscribe(data=>{
this.pageClients.content.splice(
this.pageClients.content.indexOf(p),1
);
},err=>{
console.log(err);
})
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
}
}
How to resolve this?
EDIT
delete(p:Clients){
swal({
title: "are you sur ?",
text: " nce deleted, you will not be able to recover this imaginary file!!",
type: 'warning',
showConfirmButton: true,
showCancelButton: true
})
.then((willDelete) => {
if (willDelete) {
this.clientService.deleteClient(p.id)
.subscribe(data=>{
this.pageClients.content.splice(
this.pageClients.content.indexOf(p),1
);
},err=>{
console.log(err);
})
swal({
title: " great",
type: 'success',
});
} else {
swal("you have not deleted this client yet ");
}
});
}
when this alert appears, I always get the 'great' alert, whenever I choose OK or cancel.
When I tried to print this, I understood that it's always executing the first one if(willDelete), so this client is deleted whether I choose ok or cancel.
When you are trying to use swal
function you need provide just the properties available on a SweetAlertOptions
Interface It has a lot of properties but this properties doesn't exist
icon: "warning",
buttons: true,
dangerMode: true,
Instead this you can use:
type :'warning',
showConfirmButton: true,
showCancelButton: true,
FINAL CODE
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
type: 'warning',
showConfirmButton: true,
showCancelButton: true
})
.then((willDelete) => {
if (willDelete) {
this.clientService.deleteClient(p.id)
.subscribe(data=>{
this.pageClients.content.splice(
this.pageClients.content.indexOf(p),1
);
},err=>{
console.log(err);
})
swal({title:"Poof! Your imaginary file has been deleted!",
type: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
Just to be sure
I'm using the following src ngx-sweetalert2
npm install --save sweetalert2 @toverux/ngx-sweetalert2