javascript/angular 4 property is undefined after interval tries to get value

I am trying to build an timer, but it is not working. What I do is I have a button which starts the timer. It sets the begin time and after that start an interval to count on screen. But the function which is called by the interval fails because the beginning time is undefined. I debuged to see if the beginning time is being set, and it is. But when it is called through the interval it is undefined.

Here is my code Some properties

timeBegan = new Date();
started = null;


the start function

start() {
this.timeBegan = new Date();
document.getElementById('ticker').innerHTML = '00:00:00.000';

this.started = setInterval(this.clockRunning, 10);
}


the clockrunning function

public clockRunning() {
const currentTime = new Date();
console.log(this.timeBegan);
console.log(currentTime.getTime());
const timeElapsed = new Date(currentTime.getTime() - this.timeBegan.getTime());
const hour = timeElapsed.getUTCHours();
const min = timeElapsed.getUTCMinutes();
const sec = timeElapsed.getUTCSeconds();
const ms = timeElapsed.getUTCMilliseconds();

console.log(currentTime.getSeconds());
console.log(this.timeBegan);
document.getElementById('ticker').innerHTML =
(hour > 9 ? hour : '0' + hour) + ':' +
(min > 9 ? min : '0' + min) + ':' +
(sec > 9 ? sec : '0' + sec) + '.' +
(ms > 999 ? ms : ms > 9 ? '0' + ms : '000' + ms);


}


What am I doing wrong?

Continue reading...