Is there a way to see the countdown timers in Angular 7?

Question

Is there a way to see the countdown timers in Angular 7?

Is there a way for me to view my timer's countdown as it starts? I have attempted to bind it to a variable, but all I see is [object Object]:

setTime(time) {
    if (this.settime >= 5 ) {
      this.currentTime = time;
      this.alerttime = this.settime;
    this.notifiy.showInfo( 'Timer set for ' + this.settime + ' Minutes train is due in ' + time + ' Minutes' , '');
    const val = this.settime * 60000;
    const source = timer(val);
    this.time = source;
    console.log(this.time); // this prints out the observbale function Ive also tryed to bind it in the subscribe method but no joy.
    const subscribe = source.subscribe(value => { this.alertTimer(); });
    this.settime = '';
    //cordova.plugins.backgroundMode.enable();
    } else {
      this.notifiy.showFailure('You cant set the timer below 5 minutes', '');
    }
  }

I'm struggling to pinpoint where I may be going astray.

javascript typescript angular7

Answer 1

Answer №1

The simple answer is that it's not possible because the timer you are currently using doesn't support this feature, as mentioned in the documentation.

However, if you need to keep track of the elapsed time separately, you can consider using the "interval" function instead.

Here is an example of how you can achieve this using a combination of `timer()` and `interval()`:

Say you set a timer for 120 seconds using `timer()`, and then use `interval()` to track the elapsed time and update the UI until the main timer ends.

Here is a basic implementation to demonstrate the concept:

class TimerManager {

   private totalSeconds;
   private elapsedSeconds;
   private timerSub;
   private intervalSub;

   // Start the timer
   public startTimer(timerLengthSeconds) {
      this.totalSeconds = timerLengthSeconds;
      var t = new timer(timerLengthSeconds);
      this.timerSub = t.subscribe(t => this.endTimer());
      var i = new interval(1000);
      this.intervalSub = i.subscribe(i => this.intervalElapsed());
   }

   // Track each interval
   private intervalElapsed() {
      this.elapsedSeconds++;
      var remaining = this.totalSeconds - this.elapsedSeconds;
      console.log(this.elapsedSeconds + "s have passed, " + remaining + "s remaining");
   }

   // End the main timer
   private endTimer() {
     console.log("Time's up!");
     this.intervalSub.unsubscribe();
   }
}

Answer 2

The simple answer is that it's not possible because the timer you are currently using doesn't support this feature, as mentioned in the documentation.

However, if you need to keep track of the elapsed time separately, you can consider using the "interval" function instead.

Here is an example of how you can achieve this using a combination of `timer()` and `interval()`:

Say you set a timer for 120 seconds using `timer()`, and then use `interval()` to track the elapsed time and update the UI until the main timer ends.

Here is a basic implementation to demonstrate the concept:

class TimerManager {

   private totalSeconds;
   private elapsedSeconds;
   private timerSub;
   private intervalSub;

   // Start the timer
   public startTimer(timerLengthSeconds) {
      this.totalSeconds = timerLengthSeconds;
      var t = new timer(timerLengthSeconds);
      this.timerSub = t.subscribe(t => this.endTimer());
      var i = new interval(1000);
      this.intervalSub = i.subscribe(i => this.intervalElapsed());
   }

   // Track each interval
   private intervalElapsed() {
      this.elapsedSeconds++;
      var remaining = this.totalSeconds - this.elapsedSeconds;
      console.log(this.elapsedSeconds + "s have passed, " + remaining + "s remaining");
   }

   // End the main timer
   private endTimer() {
     console.log("Time's up!");
     this.intervalSub.unsubscribe();
   }
}

Answer 3

Answer №2

If you want to see a timer countdown, you can utilize the set interval function. Below is an example that demonstrates how you can implement this feature, which can also be used in Type Script. I believe this solution will be helpful in addressing your issue.

// Setting a 120-second timer...
var timeleft = 120;
var downloadTimer = setInterval(function() {
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

<div id="countdown"></div>

Answer 4

If you want to see a timer countdown, you can utilize the set interval function. Below is an example that demonstrates how you can implement this feature, which can also be used in Type Script. I believe this solution will be helpful in addressing your issue.

// Setting a 120-second timer...
var timeleft = 120;
var downloadTimer = setInterval(function() {
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  }
  timeleft -= 1;
}, 1000);

<div id="countdown"></div>

Is there a way to see the countdown timers in Angular 7?

Answer №1

Answer №2

Similar questions

Custom virtual properties can be set in Mongoose by utilizing the return value in a callback function

Interactive 3D model movable within designated area | R3F

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Tips to center a circular progress bar in Material UI

remain on the multi drop down page for a specified duration

Injecting an attribute with the forbidden character "@" into the Document Object Model (DOM

The magic of data binding in AngularJS's ng-repeat

Issue with displaying entire object using Jest and console.dir

The Material-UI selector isn't functioning properly for me

What is the best way to retrieve the name of a static method within a class?

How can I configure Angular to redirect to an error page whenever an error is encountered in an HTTP API request?

What is the method for making an interface extension from a type as optional?

Having trouble implementing the Material UI time picker because it does not meet the required DateTime format

Node.js seems to be having trouble with emitting events and catching them

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

After calling the use method in Express, utilizing the get method

Switch the style of a set of thumbnail images when clicked

Transferring a Sharepoint 2010 List Item between folders

What is the best way to determine the width of a scroll bar?

Error encountered while attempting to convert CSV file: InvalidStateError