In my data table, each row has a column containing buttons. To ensure that only the button in the clicked row is executed, I include the index of that row in the start/pause timer function.
I decided to create these functions in a service so that the timer would continue to run even when switching pages and not be destroyed.
The issue I'm facing is that when the timer is running and I change pages, the state of the buttons changes. For example, if I click play, it turns green, but when I return to the page, the button is no longer green. I suspect that the problem lies in losing the line index when changing pages, as the service is still active.
Does anyone have any suggestions on how to resolve this?
HTML
<div class="row">
<button type="button" data-toggle="dropdown" class="btn ClassPlay">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
(click)="currentState='start'; startTimer(data)">Start</a>
<a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
(click)="currentState='pause'; pauseTimer(data)">Stop</a>
</div>
</div>