Counting up in Angular from a starting number of seconds on a timer

Question

Counting up in Angular from a starting number of seconds on a timer

Is there a way to create a countup timer in Angular starting from a specific number of seconds? Also, I would like the format to be displayed as hh:mm:ss if possible.

I attempted to accomplish this by utilizing the getAlarmDuration function within the template with a duration specified in seconds.

getAlarmDuration(duration: number): any {
    this.countStart = duration;
    setInterval(this.setTime, 1000);
}

setTime(): void {
    ++this.countStart;
    console.log(this.pad(parseInt((this.countStart / 60).toString(), 10)) + ':' + this.pad(this.countStart % 60))
}

pad(val: any): string {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    }
    else {
        return valString;
    }
}

Any help is greatly appreciated. Thank you.

javascript angular typescript timer counter

Answer 1

Answer №1

To transform the counter to the desired result, you can utilize the interval feature from the 'rxjs' library and map the values accordingly.

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Count';
  currentSeconds = 60;

  // Using interval to emit every 1000ms
  count$ = interval(1000).pipe(
    // Map transformation to get hh:mm:ss format 
    map(count => this.format(count + this.currentSeconds * 1000))
  );

  format(seconds: number): string {
    return new Date(seconds + +new Date()).toLocaleString('en-EN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  }
}

Check out a working sample on stackblitz showcasing this implementation.

Answer 2

To transform the counter to the desired result, you can utilize the interval feature from the 'rxjs' library and map the values accordingly.

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Count';
  currentSeconds = 60;

  // Using interval to emit every 1000ms
  count$ = interval(1000).pipe(
    // Map transformation to get hh:mm:ss format 
    map(count => this.format(count + this.currentSeconds * 1000))
  );

  format(seconds: number): string {
    return new Date(seconds + +new Date()).toLocaleString('en-EN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  }
}

Check out a working sample on stackblitz showcasing this implementation.

Counting up in Angular from a starting number of seconds on a timer

Answer №1

Similar questions

Gather image origins from a website, even if img tags are inserted through javascript or other methods during the page's rendering

Creating an array of multiple divs based on numerical input

Using Jquery Mobile to make an AJAX POST request with XML

The specified 'detail' property cannot be found on the given type '{}'. Error code: 2339

Ways to retrieve the page name where the script originates from

Is there a way to remove a row through fetch using onclick in reactjs?

How to include a javascript file in a vuejs2 project

Activate the default JavaScript action within an event handler

Invoker of middleware and stack functions for Express.js with a focus on capturing the response object

Tips for fading the text of list items when their checkbox is marked as done?

Is there a way to capture all ajax responses?

reactjs error: Attempting to utilize the toLowerCase method on an undefined property during double mapping

Following the execution of the "ng build --prod" command in Angular 2, the functionality of ui

Jquery function for determining height across multiple browsers

Initialization issue detected in Angular's module APP_INITIALIZER

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

What is the best way to implement function chaining in TypeScript?

jsTree unable to locate node using the provided ID

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

My HTML grid table is not being properly rendered by the JSON data