Sweetalert2 is it possible to display the alert only once? - html

Question

I have a question. Is it possible for sweetalert2 to appear only once per page?
So that it would remember that it had already displayed the alert once.
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info');
}
});
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>

Answer 1

The sweetalert library doesn't have specific functionality for this, so it will need to be written by yourself. Below is an example of how you could make it work to only have the alert open once.
// Add this variable in a place where it will persist (like the component or service)
hasAlertOpened = false;
// Add this in the function where the Swal.fire is executed
if (this.hasAlertOpened) {
// Prevent continueing if the alert has opened before
return;
}
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true, showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
// Once it gets here we set the value to true, so it will not get here again unless you set hasAlertOpened to false somewhere else
this.hasAlertOpened = true;
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});