Creating a countdown clock in Angular 5

Question

Creating a countdown clock in Angular 5

I am currently working with Angular 5.

Is there a way to initiate a timer as soon as the 'play' button is clicked, in order to track the elapsed time since the click?

Additionally, I am interested in learning if it's feasible to pause the timer and then resume from where it was paused.

After some trial and error, I found a solution based on Pardeep Jain's response. Though it wasn't exactly what I had in mind. Instead of a countdown, I needed to track the duration. Below is the code snippet that resolved my issue:

time: number = 0;
interval;

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

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

angular typescript timer angular5

Answer 1

Answer №1

To create a timer in Angular, you can use the setInterval function. Here is an example code snippet:

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 to create a timer is by using Observable timer as shown 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, you can visit this link

Answer 2

To create a timer in Angular, you can use the setInterval function. Here is an example code snippet:

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 to create a timer is by using Observable timer as shown 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, you can visit this link

Answer 3

Answer №2

If you're in need of a more robust solution, consider checking out the npm package known as marky. This tool goes beyond basic timing functionalities and offers additional features to enhance your time tracking experience. To get started, simply install the package using npm and import it into your project wherever necessary. For more information about the marky package, visit: https://www.npmjs.com/package/marky

Once installed via npm, you can utilize marky like this:

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);
}

The key parameter serves as a unique identifier for each time measurement. By assigning different keys, you can track multiple timings and later refer back to them for analysis.

Answer 4

If you're in need of a more robust solution, consider checking out the npm package known as marky. This tool goes beyond basic timing functionalities and offers additional features to enhance your time tracking experience. To get started, simply install the package using npm and import it into your project wherever necessary. For more information about the marky package, visit: https://www.npmjs.com/package/marky

Once installed via npm, you can utilize marky like this:

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);
}

The key parameter serves as a unique identifier for each time measurement. By assigning different keys, you can track multiple timings and later refer back to them for analysis.

Creating a countdown clock in Angular 5

Answer №1

Answer №2

Similar questions

Tips for receiving a linter/compiler warning when comparing a function without its call being made?

It is not possible to repeatedly hear the same event on a single element

Unusual conduct exhibited by a 16th version Angular module?

Troubleshooting problems with permissions when using the AWS IAM assumeRole function with session

Tips for optimizing HttpRequests within nested for-loops that utilize subscribe()?

What steps should I take to resolve the error message "ESLint encountered an issue determining the plugin '@typescript-eslint' uniquely"?

Rule in ESLint mandating return type for arrow functions

Angular application making a POST request to a Spring REST API

The Angular form remains invalid despite all form fields being valid

Exploring Recursive Types in TypeScript

Optimal method for passing data from a function that utilizes a callback

Make TypeScript parameter optional if it is not supplied

How do I retrieve and display all the locally stored variables in Angular 2/JavaScript and calculate the total number of keys present in the localStorage?

Ways to verify if a certain type possesses an index signature during runtime

What is the best way to run a scheduled task automatically using node-cron?

Using class variance authority variants allows for the acceptance of a "null" value, although it is not recommended

Creating Beautiful MDX Layouts with Chakra UI

Create distinct projects for WebApi and Angular to keep them separate

The Object filter is experiencing a delay with processing 10,000 items

The issue of flickering while scrolling occurs when transitioning to a new page in Angular