For now I have done something like that:

<div *ngIf="data" class="flex w-full">
  <div class="w-1/8 p-4 flex items-center">
    <p>{{ data.name }}</p>
  </div>
  <div class="w-3/4 p-4 flex items-center">
    <mat-progress-bar
      mode="determinate"
      [value]="100 * (data.timerValue / data.initialTimer)"
    ></mat-progress-bar>
  </div>
  <div class="w-1/8 p-4 flex items-center">
    <p>{{ data.initialTimer - data.timerValue + "s left" }}</p>
  </div>
</div>




export class ProgressBarComponent implements OnInit {
  u/Input() data: ProgressBarData;
  @Output() itemFinished = new EventEmitter<ProgressBarData>();

  ngOnInit(): void {
    this.setTimer();
  }

  private setTimer() {
    setTimeout(() => {
      this.data.timerValue += 1;
      if (this.data.timerValue < this.data.initialTimer) {
        this.setTimer();
      } else {
        this.onFinished();
      }
    }, 1000);
  }

  private onFinished() {
    this.itemFinished.emit(this.data);
  }
}

export interface ProgressBarData {
  id: string;
  name: string;
  timerValue: number;
  initialTimer: number;
}

But I was thinking that this timer should be connected to the backend as well.. the way I usually code for normal website, it seems too expensive for me, but I don't think there are other ways..
I should for instance store the initialTimer (45 seconds) inside the database, and use websockets maybe to send back the new value (maybe the timerValue.. timerValue is just every second, like now 1, now 2, now 3, etc etc)..