Okay so I can't comment because I have no reputation yet, but I wanted to share how I worked around this. What I did is create a parent <div> element around my dialog title/content which calls a closeMe() function on click. This closeMe() calls the 'this.dialogRef.close()' function which actually does close the dialog box.
When the ng2-idle fires the onIdleEnd observable, I simulate the click on that parent div. To do this, I needed to 'inject' the Idle object into the dialog.
My dialog box component.ts file:
import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Idle } from '@ng-idle/core';
@Component({
selector: 'idle-timeout-warning-modal',
templateUrl: './idle-timeout-warning.component.html',
styleUrls: ['./idle-timeout-warning.component.css'],
})
export class IdleIimeoutWarningComponent implements OnInit {
private idle: Idle;
public countdown: number;
//Need this in order to close the dialog box on idle end. This is because, for some reason,
//I cannot do a this.dialogRef.close() in the onIdleEnd subscription.
@ViewChild('closeMeDiv') closeMeDiv: ElementRef;
constructor(
public dialogRef: MatDialogRef<IdleIimeoutWarningComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, //Data is: {"idleObj":<idle object>, "timeout":<timeoutPeriodSec (integer)>}
) {
this.idle = data.idleObj;
this.countdown = data.timeout;
}
ngOnInit() {
this.idle.onTimeoutWarning.subscribe((countdown: number) => {
this.countdown = countdown;
});
this.idle.onIdleEnd.subscribe(() => {
this.closeMeDiv.nativeElement.click();
});
}
closeMe() {
this.dialogRef.close();
}
}
My dialog box html file:
<div #closeMeDiv (click)="closeMe()">
<div mat-dialog-title>
<h3>Please move the mouse or press any key</h3>
<hr />
</div>
<div mat-dialog-content>
<p>
You'll be logged out in <span class="idle-label idle-label-warning">{{countdown}}</span>
second<span *ngIf="countdown != 1">s</span>.
</p>
</div>
</div>
Then in the idle setup function (in another service I have, where ````this.idle``` is injected in the constructor parameters):
let idleStartSec:number = 5;
let timeoutPeriodSec:number = 5;
// sets an idle timeout - will trigger timeout period
this.idle.setIdle(idleStartSec);
// sets a timeout period. after this amount of inactivity, the user will be considered timed out.
this.idle.setTimeout(timeoutPeriodSec);
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
this.idle.onIdleStart.subscribe(() => { //Fires when timeout is about to start
this.dialogRef = this.dialog.open(IdleIimeoutWarningComponent, {
panelClass: 'modal-lg',
data: {"idleObj":this.idle, "timeout":timeoutPeriodSec}
});
});
this.idle.onTimeout.subscribe(() => {
this.dialogRef.close();
//Do other stuff here
});
It's strange that the direct call to this.dialogRef.close(); works in onTimeout but not in the onIdleEnd.
Anyway, hope this helps until the issue is fixed.
