TypeScript - Angular 4: Timer Going to Negative values after 0

[akhilmukkamala]

Hey my timer is going to negative values, Please look into the code and help me. After 00 seconds it should redirect to next question. And Instead of Hard-coding the time over there I want some better suggestion… Like depending on the test type the timer has a particular start time.

timeString : string;

    duration = 1*5;
    seconds = "--";
    minutes = "--";
    
    clockDisplay : string; 
    
    tickTick(){
        if(this.duration > 0){
        setInterval( () => {this.duration = this.duration - 1;
        if(this.duration % 60 < 10){
            this.seconds = "0"+this.duration%60;
        }else{
            this.seconds = (this.duration%60).toString();
        }
   
        if(this.duration / 60 < 10 ){
            this.minutes = "0"+parseInt(""+this.duration/60,10);
        }else{
            this.minutes = ""+parseInt((this.duration / 60).toString(),10);
        }
        
        this.clockDisplay = this.minutes + " : " +this.seconds; },1000); 
        }
    }

[MartinMuzatko]

@akhilmukkamala

setInterval

When you set an interval, you can retrieve their ID for later removal. So when your duration is 0, you need to clear that interval. See docs: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

This has nothing to do with Angular per se. This is purely a javascript feature.

Your script suggests, that tickTick is executed every tick. But you would need to set up the setInterval function only once. Please let me know what the entire component is, so we can better debug this.

Best,
Martin

[akhilmukkamala]

so is it clearInterval(duration); ?

[MartinMuzatko]

No

You do not clear the duration, but you clear the interval. So it doesn’t count further down.

this.interval = setInterval(() => {
and later if duration <= 0 you can do clearInterval(this.interval)

I created a working codepen for you:

I think this is also important for grasping setInterval: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Return_value

[akhilmukkamala]

Hey it is showing me the following error at interval.

[MartinMuzatko]

Ow! Truth is, that I don’t know that much of typescript. The last thing I expected, was that they revamp VANILLA js with their types. And even though interval is a number, I think they want it stored with their interface.

I will dig a little more into the topic and let you know. For now you could try the type Timer, or just go with any.

Best,
Martin

[MartinMuzatko]

So I set up typescript and I actually got it to work. Is this some custom stuff of Angular maybe?

I found an issue, not sure if this is helpful: https://github.com/Microsoft/TypeScript/issues/842
It looks like it is some built-in of nodejs? Did you install wrong typings maybe?

Please post your entire timer.ts to better analyze the problem.
Best,
Martin

[akhilmukkamala]

Hey Thanks a ton @MartinMuzatko for taking time and helping.

[akhilmukkamala]

This is my timer.ts, And am displaying the clock Display in HTML

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'timer',
    templateUrl: 'timer.html',
    styleUrls : [ 'timer.css' ]

})

export class TimerComponent implements OnInit {
    constructor() { }

    ngOnInit() { 
        console.log(this.minutes + " : " + this.seconds);
        this.tickTick();
    }
    timeString : string;
    // duration = 10*60;
    duration = 5;
    seconds = "--";
    minutes = "--";   
    clockDisplay : string; 
interval: number;
    tickTick(){
        if(this.duration > 0){
         setInterval( () => {this.duration = this.duration - 1;
    if(this.duration <=0 ){
        clearInterval(this.interval)	
        }

    if(this.duration % 60 < 10){
        this.seconds = "0"+this.duration%60;
    }else{
        this.seconds = (this.duration%60).toString();
    }

    if(this.duration / 60 < 10 ){
        this.minutes = "0"+parseInt(""+this.duration/60,10);
    }else{
        this.minutes = ""+parseInt((this.duration / 60).toString(),10);
    }

    this.clockDisplay = this.minutes + " : " +this.seconds; },1000); 
    }
}


}