Angular ngx-sweetalert2 stopTimer on mouseenter

Question

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

Answer 1

That's a good case for a directive, check out this answer: Elevate md-card in angular material

The accepted answer has code executing on the same events you want