How to display alert remaining session for 5 minutes and alert for showing session expire in angular 7?

Published

How to show alert message when 10 minutes session have last remaining 5 minutes and once session completed need to redirect to login page. before redirecting i want to show user that their session has expired.

this is my component.ts file

  public timerclock:number=300;
  public subscription:Subscription;
  session expire = false;  
  constructor(private dialogref: mat dialogref<Ticket Session Timeout Component>) { }
  ngOnInit(): void {
    this.subscription=timer(1000, 1000).subscribe(timeclock=>{
        this.timerclock =this.timerclock-1;
       
    });
  }
}
  reset:void{
    window.location.reload();
  }

  ngOnDestroy()
  {
    if(this.subscription && !this.subscription.closed)
    {
      this.subscription.unsubscribe();
    }
  }

this is component.html///

<div mat-dialog-content class="mat-context>
          <mat-alert  [dismissible]="true" *ngif={{!session expire}}></mat-alert>
Your session will expire in 5 minutes.
    </div>
    <div mat-dialog-content class="mat-context>
        <mat-alert  [dismissible]="true"  *ngif={{!session expire}}></mat-alert>
Your session has expired.Please login again. 
  </div>
  <div>
    <button mat-button="secondary" (click)="Close('cancel')">Close</button>
  </div>

////this is interceptor.ts file where timerclock is by default showing session end 0 but not for 5 minutes alert//

public timeclock:number;

  constructor(public dialog: Mat Dialog) {}

  ngOnInit() {
   timer(1000,1000).subscribe(timeclock =>{
     this.timeclock =this.timerclock-1;
   })
    
      if((this.timeclock%60)==0) 
      console.log(this.timeclock/60, "remaining time")
      if(this.timerclock==0) {
        const  show ={
          id:"TicketSession",
          max-width:"50%",
        data:{
          name:"TicketSession",
          Component:Ticket Session Timeout Component
        },    };
        this.dialog.open(Ticket Session Timeout Component, show);
    
    });
  }

  Interceptor(request:Http Request<any>, next:HttpHandler):observable<HttpEvent<any>>
  {
    this.timerclock= 10*60;
    return next. handle(request)
  }
}

I am not able to get alert for 5min here. Any suggestion to resolve it will be highly appreciate

Source: Angular Questions

Published
Categorized as angular, typescript Tagged ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq