create a stopwatch in angular 6

Question

I am using angular. I want to implement stopwatch. I have a list which consists of one or more objects. I have a start timer and end the timer button for each item. when I click on the start button this should start the timer for the specific item & when I click on the end timer button this should pause the timer so that I can restart the time. but only one timer should run at a time. if Item A timer is started & if click on the start timer button of Item B it should pause the previous timer & start the new timer for Item B.

allUserTaskArr = [
    {
      'name': 'abc',
     'id':1,
     'start': true,
     'end': false
    },
     {
      'name': 'xyz',
     'id':1,
     'start': true,
     'end': false
    }

  ];
 
 startTask (item) {
    if(item.start) {
      item.end =  true;
      item.start= false;
    } 
  }

  EndTask (item) {
    if(item.end) {
      item.end =  false;
      item.start= true;
    }
  }

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      {{item.due | date}}
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          {{item.name}}
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" *ngIf="item.start" (click)="startTask(item)">Start Timer</button>
            <button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End Timer</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

score 3 · Answer 1 · answered Mar 04 '19 at 12:37

You will need to create a timer, which is an Observable you can subscribe to. In the callback do the action. For example:

in Component:

import { timer } from "rxjs";

ngOnInit() {
    timer(0, 1000).subscribe(ellapsedCycles => {
      if(this.isRunning) {
        this.time--;
      }
    });
  }

toggleTimer() {
    this.isRunning = !this.isRunning;
  }

and in Template:

<button (click)="toggleTimer()">Toggle timer</button>
<div>{{ time }}</div>

score 3 · Answer 2 · answered Aug 19 '19 at 09:35

Create a timer which grows per sec, then convert the time to display format

   timer(0, 1000).subscribe(ec => {
          this.time++;
          this.timerDisplay = this.getDisplayTimer(this.time);
        });

getDisplayTimer(time: number) {
    const hours = '0' + Math.floor(time / 3600);
    const minutes = '0' + Math.floor(time % 3600 / 60);
    const seconds = '0' + Math.floor(time % 3600 % 60);

    return {
      hours: { digit1: hours.slice(-2, -1), digit2: hours.slice(-1) },
      minutes: { digit1: minutes.slice(-2, -1), digit2: minutes.slice(-1) },
      seconds: { digit1: seconds.slice(-2, -1), digit2: seconds.slice(-1) },
    };
  }`

score 0 · Answer 3 · answered Mar 04 '19 at 12:34

You are starting and ending the same timer because you pass the current item of the foreach loop. So you change the properties of the same item/timer.

To fix that you need to find the item/timer which is currently running so for the startTask method do the following:

startTask (item) {
   // Find current running timer
   var runningTimer = this.allUserTaskArr.find(ti => ti.start === true);
   // Stop this timer
   runningTimer.start = false;
   runningTimer.end = false;

   // Start the timer you pressed
   item.start = true;
}

score 0 · Answer 4 · answered Jul 12 '20 at 16:44

Stopwatch dynamic set value

  export class TimerComponent implements OnDestroy {
      clock: any;
      minutes: any = '00';
      seconds: any = '00';
      milliseconds: any = '00';
      hours:any = '00';
      
      @Input() start: boolean;
      @Input() showTimerControls: boolean;
    
      constructor() {
    
      }
      ngOnChanges(changes: SimpleChanges) {
        console.log(changes['start']);
        if (changes['start'].currentValue) {
          this.startTimer();
        }
        else{
          this.clearTimer();
        }
      }
    
      laps: any = [];
      counter: number;
      timerRef;
      running: boolean = false;
      startText = 'Start';
    
    
      startTimer() {
        // const source = timer(0, Date.now());
        // const subscribe = source.subscribe(val => console.log(val));
        this.running = !this.running;
        if (this.running) {
          this.startText = 'Stop';
         const startTime = Date.now() - (this.counter || 0);
          // const startTime = Date.now() - (this.counter || 5989395);
    
          this.timerRef = setInterval(() => {
            
            this.counter  = Math.abs(new Date('July 12, 2020 20:00:00').getTime() - new Date().getTime());
            // this.counter = Date.now() - startTime;
            // console.log(Date.now());
            // console.log(startTime);
            // console.log(this.counter);
            // this.milliseconds = Math.floor(Math.floor(this.counter % 1000) / 10).toFixed(0);
            // this.minutes = Math.floor(this.counter / 60000);
            // this.seconds = Math.floor(Math.floor(this.counter % 60000) / 1000).toFixed(0);
            // this.hours = Math.floor(this.counter / 3600000);
    
            this.hours  = Math.floor((this.counter % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            this.minutes  = Math.floor((this.counter % (1000 * 60 * 60)) / (1000 * 60));
            this.seconds = Math.floor((this.counter % (1000 * 60)) / 1000);
            //console.log(this.counter);
            if (this.counter < 0) {
              this.clearTimer();
              console.log('expired')
            }
             if (Number(this.hours) < 10) {
              this.hours = '0' + this.hours;
            } else {
              this.hours = '' + this.hours;
            }
            if (Number(this.minutes) < 10) {
              this.minutes = '0' + this.minutes;
            } else {
              this.minutes = '' + this.minutes;
            }
            if (Number(this.seconds) < 10) {
              this.seconds = '0' + this.seconds;
            } else {
              this.seconds = '' + this.seconds;
            }
          });
        } 
    <div class="container">
      <section class="timer-counter-label">
        <div *ngIf="counter" [ngClass]="{blink: !running}">
          <span>{{hours}}:</span><span>{{minutes}}:</span><span>{{seconds}}:</span> <span>{{milliseconds}}</span> </div>
        <div *ngIf="!counter">
          <!-- <span class="blink timer-start-text">Press Start</span> -->
          <!-- <br> -->
          <span>{{hours}}:</span><span>{{minutes}}:</span><span>{{seconds}}:</span> <span>{{milliseconds}}</span>
        </div>
      </section>
      <div class="timer-button-container" *ngIf="showTimerControls">
        <button class="timer-button" (click)="startTimer()">
          {{ startText }}
        </button>
        <button [disabled]='!counter' [ngClass]="{'disabled': !counter}" class="timer-button" (click)="lapTimeSplit()">Lap</button>
        <button class="timer-button" (click)="clearTimer()">Clear</button>
        <br>
        <div *ngFor="let lap of laps;let i = index">
          <div> &#9873; <b>Lap {{i+1}} ::</b>  {{lap}}</div>
          <br>
        </div>
      </div>
    </div>

create a stopwatch in angular 6

4 Answers4