make unique timer for each ngFor item

Question

I am using angular. I have created custom stopwatch. I am managing the start/end button for each ngFor item. but not able to manage unique timer for each ngFor item.

in the above image, I have different start/end button each item. when I click on the start timer button of item A, the timer starts of both items.

public seconds = 0; minutes = 0; hours = 0; t; h1 = "00:00:00";

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

    this.timer()
  }

  EndTask (item) {
    if(item.end) {
      item.end =  false;
      item.start= true;
    }
    clearTimeout(this.t);
  }
  
  
  add() {
    this.seconds++;
    if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes++;
        if (this.minutes >= 60) {
            this.minutes = 0;
            this.hours++;
        }
    }
    
    this.h1 = (this.hours ? (this.hours > 9 ? this.hours : "0" + this.hours) : "00") + ":" + (this.minutes ? (this.minutes > 9 ? this.minutes : "0" + this.minutes) : "00") + ":" + (this.seconds > 9 ? this.seconds : "0" + this.seconds);
    
    this.timer();
}

timer() {
    this.t = setTimeout(() => {
      this.add()
    }, 1000);
}

reset() {
  this.h1 = "00:00:00";
  this.seconds = 0; 
  this.minutes = 0; 
  this.hours = 0;
}

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      <span>{{item.due | date}}</span>
      <span class="float-right font-weight-bold">{{h1}}</span>
    </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</button>
            <button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I want that when I click on the start button of item A. the timer should start for item A. when the timer for item A is started & I click on item B's start button the previous timer should pause & new timer should start. actually, I want to maintain the time.

score 0 · Answer 1 · answered Mar 04 '19 at 16:54

As you has severals times, you need severals counters.

Before show how use severals counters, I suggest you use Date object and [DatePipe] from Angular to show hours:minutes:secconds

time=new Date(2000,1,1,0,0,0,0);
{{time | date:'HH:mm:ss'}}

Well, you need your items has two properties: isRunning and time.

Your function add() becomes

add()
{
    this.items.forEach((item:any)=>{  //for each item
        if (item.isRunning)   //if is running
        {
          console.log(item.time)
          item.time=new Date(item.time.getTime()+1000);
        }
    })
}

And your startTask and EndTask must take account if is already one counter running

startTask (item) {
   item.time=new Date(2000,1,1,0,0,0,0);  //initiazlize the date
   if (this.items.find((x:any)=>x.isRunning)) //if some is running
      item.isRunning=true; //Simply push item.running=true
   else
   {
      item.isRunning=true;
      this.timer()   //begin the timer too
   }
}
EndTask (item) {
  item.isRunning=false;
  if (!this.items.find((x:any)=>x.isRunning)) //if nobody is running
    clearTimeout(this.t);
  }

For timer you use a setInterval, we must use Rxjs timer to control unsubscribe (TODO)

 timer() {
    this.t = setInterval(() => {
      this.add()
    }, 1000);
  }

make unique timer for each ngFor item

1 Answers1