Angular Automatic logout if Idle or inactive for some time using [@ng-idle/core] [sweetalert2]

app.component.ts

import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

import Swal from 'sweetalert2';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { DocumentInterruptSource, StorageInterruptSource } from '@ng-idle/core';

import { Account } from './core/user/account.model';
import { LoginService } from './core/login/login.service';
import { AccountService } from './core/auth/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  title = 'frontend';
  subscription!: Subscription;

  // add parameters for Idle and Keepalive (if using) so Angular will inject them from the module
  constructor(
    private idle: Idle,
    private router: Router,
    private loginService: LoginService,
    private accountService:AccountService,
  ) { 
    // set idle parameters
    this.idle.setIdle(9*60); // how long can they be inactive before considered idle, in seconds [9min]
    this.idle.setTimeout(1*60); // how long can they be idle before considered timed out, in seconds [1min]

    const CUSTOM_INTERRUPTSOURCES = (options:any) => {
      return [
          new DocumentInterruptSource('keydown mousedown touchstart touchmove scroll', options),
          new StorageInterruptSource(options)
      ];
    }
    // provide sources that will "interrupt" aka provide events indicating the user is active
    this.idle.setInterrupts(CUSTOM_INTERRUPTSOURCES(null));
    // this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);


    // do something when the user becomes idle
    this.idle.onIdleStart.subscribe(() => {
      // this.idleState = "IDLE";
      // Swal.fire({ icon: "success", title: `you're about to be logged out`, showConfirmButton: false, });
    });
    // do something when the user is no longer idle
    this.idle.onIdleEnd.subscribe(() => {
      // this.idleState = "NOT_IDLE";
      // this.countdown = null;
    });
    // do something when the user has timed out
    this.idle.onTimeout.subscribe((val?:any) => {
      // this.idleState = "TIMED_OUT"
      this.loginService.logout();
      this.router.navigate(['login']);
      Swal.fire({ icon: "error", title: "Session Timeout", showConfirmButton: false, });
    });

    // do something as the timeout countdown does its thing
    this.idle.onTimeoutWarning.subscribe(seconds => {
      Swal.fire({ icon: "warning", title: "warning",  text: `You Will be logout in ${seconds} Sec`, confirmButtonText: "Stay, Keep me loggin", });
    });

    this.accountService.getAuthenticationState().subscribe((account:Account | null)=>{
      // console.log({account})
      if (account) idle.watch();
      else idle.stop();
    });
    // Swal.fire({ icon: "warning", title: `You Will be logout in ${'seconds'} Sec`, timer: 10500, showConfirmButton: true, backdrop: false, target: '', confirmButtonText: 'Yes, Sure', confirmButtonColor: '#13b7d7'});
  }

  ngOnInit(): void {}

}