Idle interupt and timeout warning

[rey-coder]

Hi, I am trying to show a warning when idle and hide the warning when interrupted. The warning is displayed and successfully hidden on timeout. However when an interrupt is detected, the countdown stops but the warning still displays. I am using ngif to show/hide the warning.

... in my component.ts constructor

idle.onTimeoutWarning.subscribe((countdown) => {
      this.showWarning= true;
      this.idleTimer = 'Auto log out in ' + countdown + ' seconds!';
    });

idle.onIdleEnd.subscribe(() => {
        this.showWarning= false;
});

idle.onTimeout.subscribe(() => {
     this.showWarning= false;
 });

...in my html

      <div *ngIf="showWarning">
          <div class="alert alert-warning alert-dismissible">
            <div >
              <p><strong>{{idleTimer}}</strong></p>
            </div>
          </div>
        </div>

I am using angular 6.
Thanks!

[eglyte]

have the same issue in Angular 6, @rey-coder did you found solution?

[rey-coder]

Not yet @eglyte

[eglyte]

It was doing my head, I thought I'm going crazy because on example it works.
I have replicated example on my machine with Angular 6.1.0, Angular CLI 6.2.1 and Typescript 2.9.2 it was working, but then I have removed keepalive and ping - and it was not working!

Appeared that it's problem with Angular view not detecting changes.

My solution using
https://angular.io/api/core/ChangeDetectorRef

Call private ref: ChangeDetectorRef in constructor

idle.onIdleEnd.subscribe(() => {
                this.idleState = 'No longer idle.';
                setInterval(() => {
                    this.ref.detectChanges();
                }, 1000);
            }
        );

and

ngOnDestroy() {
       this.ref.detach();
   }

Also there are other ways to trigger change detection
Hope it helps @rey-coder