How to do a timer in Angular 5

Question

I'm using Angular 5.

I want to know how can I start timing when a 'play' button is pressed, in order to know how much time has passed since I clicked.

I'd also like to know if it's possible to stop the timer and then be able to continue with the same time before.

I've finally solved my question with Pardeep Jain answer. Athough it wasn't exactly what I was looking for. I didn't want a countdown, I wanted to count the duration. Here is the code I've used at the end:

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  },1000)
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}

Can you show us your attempts so far? Or do you have a more specific question about where you are getting stuck? — Explosion Pills, May 21 '18 at 19:26

Pardeep Jain · Accepted Answer · 2022-05-15T11:03:58.787

129

You can simply use setInterval to create such timer in Angular, Use this Code for timer -

timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }
    
<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

#Working Example

#Another way using Observable timer like below -

import { timer } from 'rxjs';

observableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="observableTimer()">Start Observable timer</p> {{subscribeTimer}}

Working Example

For more information read here

edited May 15 '22 at 11:03

answered May 21 '18 at 19:28

Pardeep Jain

84,110
37
165
215

3

Use timer of observable instead – Liu Zhang Dec 24 '18 at 08:59
@blackiii thanks for suggestion, answer updated! – Pardeep Jain Dec 26 '18 at 05:39
@PardeepJain How can I call a function when finished timer? – Mohammad Daliri Mar 09 '19 at 07:36
You can check if timeLeft is = 0, call your function – Pardeep Jain Mar 09 '19 at 18:26
If you are looking for a more comprehensive solution with various formatting options and functions like start/stop/pause/resume, check this answer - https://stackoverflow.com/a/56230401/1209475 – Nitin Kamate May 21 '19 at 02:43
Thank you for the rx example, checked it out on stackblitz. One thing to make your code a bit more read and understandable: In app.component.ts line 19 (line 5 in the snippet above) you can remove the variable abc. So, instead of const abc = source.subscribe(val => { you could write source.subscribe(val => { only. – Kristian Heitkamp Mar 31 '22 at 11:53
1

Additionally you could skip the source variable and subscribe directly to the timer: timer(1000, 1000).subscribe(val => {this.subscribeTimer = this.timeLeft - val;}); – Kristian Heitkamp Mar 31 '22 at 12:36
2

The link has changed: https://www.learnrxjs.io/learn-rxjs/operators/creation/timer but thanks for the example! – Apollo Apr 22 '22 at 10:21
1

@Apollo link updated in original answer, thanks for the update – Pardeep Jain May 15 '22 at 11:04

bitW0lf · Answer 2 · 2018-05-21T20:35:48.940

0

This may be overkill for what you're looking for, but there is an npm package called marky that you can use to do this. It gives you a couple of extra features beyond just starting and stopping a timer. You just need to install it via npm and then import the dependency anywhere you'd like to use it. Here is a link to the npm package: https://www.npmjs.com/package/marky

An example of use after installing via npm would be as follows:

import * as _M from 'marky';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {
 Marky = _M;
}

constructor() {}

ngOnInit() {}

startTimer(key: string) {
 this.Marky.mark(key);
}

stopTimer(key: string) {
 this.Marky.stop(key);
}

key is simply a string which you are establishing to identify that particular measurement of time. You can have multiple measures which you can go back and reference your timer stats using the keys you create.

edited May 21 '18 at 20:35

answered May 21 '18 at 20:26

bitW0lf

147
6

6

Why use extra package just to use a simple timer? – Pardeep Jain May 22 '18 at 05:21
3

Gives him the versatility to use it anywhere without needed to create a whole new service or separate helper util. Also allows you to store multiple different timer stats to revisit if he needed to resume the timer. Not trying to say your answer is wrong, just trying to provide another option for him. – bitW0lf May 22 '18 at 12:32
1

Another example of an unnecessary package, with something that is already supported in angular with setInterval. The "versatility" is already supported by angular setInterval. Providing another option for him without explaining, you remove control & add another package to manage. https://medium.com/@alexjamesdunlop/unnecessary-packages-b3623219d86 – Alex Dunlop Dec 17 '20 at 21:38

How to do a timer in Angular 5

2 Answers2

Linked