how do multiple timer countonw in mat table angular

Question

I'm trying to make a table in which there will be some kind of time counter for each row. i used "mat-progress-bar" with dynamic value, but i cant customise each timer for is correspondant row. what i want is when i add a row the timer must start only for the added row enter image description here

                         <ng-container matColumnDef="event">
                          <th mat-header-cell *matHeaderCellDef> Event </th>
                          <td mat-cell *matCellDef="let row" >
                  <mat-progress-bar mode="buffer"  value="{{tmpRest}}"></mat-progress-bar>
                          </td>
                        </ng-container>

my component code. i delcared tmpRest:number=0

passTimer(){
let source = interval(1000)
let timer$ = timer(102000)
let tmp = source.pipe(takeUntil(timer$))
tmp.subscribe((t)=>{
  this.tmpRest = 100 - t
  console.log(this.tmpRest)
})

}

Well, in this case you need an observable for each row you are trying to render. Where is your problem exactly. If there is only one `tmpRest` variable, it should be clear, that there is only one value (for each row to use). — Fabian Strathaus, Oct 25 '22 at 15:34
thanks @FabianStrathaus i get it, but every row is added automatically, its a CRUD with add button. — ivory uchiwa, Oct 25 '22 at 17:32

score 0 · Answer 1 · answered Oct 25 '22 at 17:52

When you create your row, you can add a timer$ property to it that emits the value of your timer.

const timer$ = timer(1000).pipe(
  map(i => 3-i) // 3, 2, 1, 0
  take(4)
);

Then you can subscribe to the timer$ observable using the async pipe:

<ng-container matColumnDef="event">
    <th mat-header-cell *matHeaderCellDef> Event </th>
    <td mat-cell *matCellDef="let row" >
        <mat-progress-bar mode="buffer" value="{{row.timer$ | async}}"></mat-progress-bar>
    </td>
</ng-container>

how do multiple timer countonw in mat table angular

1 Answers1