Angular ngx-sweetalert2 stopTimer on mouseenter

Viewed 17

Using the ngx-sweetalert2 wrapper for Angular. Attempting to stop the sweet alert timer on mouseenter and resume it on mouseleave.

I've got a swal showing correctly and the eventlistener attaches to the modal element correctly and executes the anonymous function fine when the mouse enters the modal. However, the global method Swal.stopTimer() doesn't stop the timer of the currently displayed sweet alert.

hmtl:

<swal
    #errorContent
    position='top'
    [toast]=true
    icon="error"
    [timerProgressBar]="true"
    [timer]="3000"
    [showConfirmButton]="false"
    (didOpen)="addHoverEvent($event)"
    (didDestroy)="nextToast()"
    >
    <div *swalPortal="swalTargets.content">
        <strong class="d-flex justify-content-center">{{ this.body }}</strong>
    </div>
</swal>

ts:

addHoverEvent(event: DidOpenEvent) {
    event.modalElement.addEventListener('mouseenter', () => {
      Swal.stopTimer();
    });

    event.modalElement.addEventListener('mouseleave', () => {
      Swal.resumeTimer();
    })
}
1 Answers
Related