angular9 - Addressing a mandatory unavoidable circular dependency in Angular 9

Question

I need perform session timeout from UI side. Below are the steps.

1. On successful login, I start a timeout to display a popup setTimeout(()=>{this.openTimeOutDialog();},expTime);

2. After 1 hour, the timeout popup appears which asks user either to logout or stay connected. and I set another timeout to here for 5 minutes within which the user should click on stayconnected else they will be logged out. setTimeout (()=>{this.logout();}, time);

3. If the user clicks on stay connected, I need to call this first setTimeout again from the TimeOutDialog component which is creating a circular dependency. i.e. when user clicks on stay connected, a call will go to the first setTimeout and then from there again the same TimeOutDialog will be called. I tried various ways but this dependency exists. I donot see a way to avoid this circular dependency. Need help fixing this. Thanks! Here is my code

   // Login Service Code

    Import {TimeOutDialog} from './../../timeout/timeout.component';
    Import {LogoutService} from './../logout.service';
    Import{MatDialog} from '@angular/material/dialog';
    
    constructor(private logoutService: LogoutService, public dialog: MatDialog ){}
    
    export class LoginService{
    
    login(uid, pwd){
    .........
    .........
    this.setSessionTimer(expTime);
    }
    
    setSessionTimer(expTime){
    setTimeout(()=>{this.openTimeOutDialog();},expTime);
    }
    
    openTimeOutDialog(){
    setTimeout (()=>{this.logoutService.logout();}, time);
    this.dialog.open(timeoutDialog, {width: '500px'});
    }
    ```


//Logout Service code

    ```
    Export class LogoutService{
    ```logout(){
    ............
    ............
    }
    }
       

//Dialog Component code

Import {LoginService}from './../../services/login.service;
Import {LogoutService}from './../../services/logout.service;
Import {MatDialogRef} from '@angular/material/dialog';

constructor(private logoutService: LogoutService, private loginService: LoginService ){}

Export TimeOutDialog{
stayConnected(){
this.loginService.setSessionTimer(expTime);
}

logout(){
this.logoutService.logout();
}
}

question from:https://stackoverflow.com/questions/65833106/addressing-a-mandatory-unavoidable-circular-dependency-in-angular-9

Answer 1

in that case you can listen the dialog close and start the timer in case of necessary

 openTimeOutDialog(){
    setTimeout (()=>{this.logoutService.logout();}, time);
    this.dialog.open(
      timeoutDialog, 
      {width: '500px'}
    )
    .afterClosed()
    .subsribe(
       response => { if(response.startSession) {this. setSessionTimer() } }
    )

 }

where the response of afterClosed meethod comes from the dialog

like this Modal.component.ts

export class ModalComponent implements OnInit {

  constructor(
    public modalRef: MatDialogRef<ModalComponent, ModalOutputData>,
    @Inject(MAT_DIALOG_DATA) public data: DefaultModalInputData
  ) { }

  ngOnInit() {
    console.log(this.data, 'data');
  }

  /**
   * close dialog and continue
   *
   * @param null
   *
   * @return `void`
   */
  onContinue() {
    this.modalRef.close({ startSession: true }); 
  }
}