Show timeout error message after particular interval time angularjs - angularjs

Question

I am trying show a timeout error message after particular interval of idle time(say 10 mins)
I followed the below link and it is working as expected.
https://long2know.com/2015/04/user-session-timeout/
var idleService = function ($rootScope, $timeout, $log) {
var idleTimer = null,
startTimer = function () {
$log.log('Starting timer');
idleTimer = $timeout(timerExpiring, 10000);
},
stopTimer = function () {
if (idleTimer) {
$timeout.cancel(idleTimer);
}
},
resetTimer = function () {
stopTimer();
startTimer();
},
timerExpiring = function () {
stopTimer();
$rootScope.$broadcast('sessionExpiring');
$log.log('Timer expiring ..');
};
startTimer();
return {
startTimer: startTimer,
stopTimer: stopTimer,
resetTimer: resetTimer
};
};
Is it possible to achieve it without the $broadcast and $on. Any guidance on how to make the controller variable know when the timeout is expired, currently it is achieved via $broadcast from service and $on on controller and then the variable will be modified in $on function.

Answer 1

You could use RxJS to create an observable. Your controller would subscribe to it through your service and when the timeout is expired, a value is emitted on your observable (could be a void value). This way, every controller that has a subscription on that observable would receive the signal that the timeout is expired.
I did a plunker to illustrate this: https://plnkr.co/edit/JSgKWLwQLAhqgRGPn9ys
First, you start by creating a method that returns an observable. I'm using a Subject as you don't need to send an initial value or a value that has already been emitted:
var getExpiredSignal = function() {
return subject.asObservable();
}
Now, when you timeout is expired, you need to send a signal through the observable by doing:
subject.next();
As your controller did subscribe to this observable via the line:
timeout.getExpiredSignal().subscribe(() => console.log('Expired!'));
The callback function logging "Expired" is triggered.

Answer 2

I made it work with the below approach
var idleService = function ($rootScope, $timeout, $log) {
var idleTimer = null,
startTimer = function () {
$log.log('Starting timer');
idleTimer = $timeout(timerExpiring, 10000);
},
stopTimer = function () {
if (idleTimer) {
$timeout.cancel(idleTimer);
}
},
resetTimer = function () {
stopTimer();
startTimer();
},
timerExpiring = function () {
stopTimer();
$rootScope.sessionFlag = true;
$log.log('Timer expiring ..');
};
startTimer();
return {
startTimer: startTimer,
stopTimer: stopTimer,
resetTimer: resetTimer
};
};
Now I am not using $broadcast and $on but I am changing the $rootscope.sessionFlag which I am referencing in my html