Angular - Activate button only on the specific row where it was clicked

Question

Angular - Activate button only on the specific row where it was clicked

I'm facing an issue with a table that contains buttons in one of the columns. Whenever I click on a button, all buttons in the column get enabled instead of just the clicked one. Can someone help me find a solution to this problem?

I've attempted passing the line number as a parameter but haven't been successful so far.

HTML

 <div *dxTemplate="let data of 'cellTemplate'">
  <button type="button" data-toggle="dropdown" class="btn ClassPlay">
    <img src="./assets/play.svg" *ngIf="currentState=='pause'">
    <img src="./assets/playV.svg" *ngIf="currentState=='start'">
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
      (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
    <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
      (click)="currentState='pause'; pauseTimer((data, data.rowIndex)">Pause</a>
  </div>
  <span class="timer">{{display}}</span>
</div>

Component.ts

startTimer(data,row) {
  this.interval = setInterval(() => {
    if (this.time === 0) {
      this.time++;
    } else {
      this.time++;
    }
    this.display=this.transform( this.time)
  }, 1000);
}

     transform(value: number): string {
   var sec_num = value; 
 var hours   = Math.floor(sec_num / 3600);
 var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
 var seconds = sec_num - (hours * 3600) - (minutes * 60);

 return hours+':'+minutes+':'+seconds;
 }

 pauseTimer(data,row) {
  clearInterval(this.interval);
}

What I Tried

<button type="button" data-toggle="dropdown" class="btn ClassPlay">
    <img src="./assets/play.svg" *ngIf="currentState=='pause'">
    <img src="./assets/playV.svg" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex">
  </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' && currentRowIndex === data.rowIndex" routerLinkActive="active"
      (click)="currentState='pause'; pauseTimer(data)">Pause</a>
  </div>
  <span class="timer">{{currentRowIndex === data.rowIndex ? display : ''}}</span>

startTimer(data) {
  this.currentRowIndex = data.rowIndex;
  this.interval = setInterval(() => {
    if (this.time === 0) {
      this.time++;
    } else {
      this.time++;
    }
    this.display=this.transform( this.time)
  }, 1000);
}

   transform(value: number): string {
 var sec_num = value; 
var hours   = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);

return hours+':'+minutes+':'+seconds;
}

pauseTimer(data) {
  this.currentRowIndex = data.rowIndex;
  clearInterval(this.interval);
}

The challenge now is when I click the start button, all buttons on other lines disappear momentarily and only reappear on the next line. The timer also behaves incorrectly, accumulating time across lines rather than starting anew on each click.

angular typescript

Answer 1

Answer №1

After reviewing your inquiry, it seems like the solution provided below may be helpful:

<div *dxTemplate="let data of 'cellTemplate'">
      <button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex"routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer()">Pause</a>
      </div>
      <span class="timer">{{currentRowIndex === data.rowIndex ? display : '00'}}</span>
    </div>

In your .ts file:

currentRowIndex = null; // Define this in your component

startTimer(index) {
    this.currentRowIndex = index;
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+':'+minutes+':'+seconds;
}

pauseTimer() {
    this.currentRowIndex = null;
    clearInterval(this.interval);
}

Answer 2

After reviewing your inquiry, it seems like the solution provided below may be helpful:

<div *dxTemplate="let data of 'cellTemplate'">
      <button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex"routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer()">Pause</a>
      </div>
      <span class="timer">{{currentRowIndex === data.rowIndex ? display : '00'}}</span>
    </div>

In your .ts file:

currentRowIndex = null; // Define this in your component

startTimer(index) {
    this.currentRowIndex = index;
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+':'+minutes+':'+seconds;
}

pauseTimer() {
    this.currentRowIndex = null;
    clearInterval(this.interval);
}

Answer 3

Answer №2

After analyzing your code, it seems like you are consistently updating the variable currentState. When the Start button (anchor) is clicked for the first time, such as in this instance:

(click)="currentState='start'; ....//

You are assigning the value 'start' to the shared variable currentState. Consequently, all instances of ngIf react to this change. I believe what you intend to achieve is having a boolean value that indicates the current state for each row in the table.

Update: Here is an example illustrating what I think you are aiming for:

<div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="startTimer(data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
          (click)="pauseTimer()">Pause</a>
      </div>

Additionally, here is what your Component.ts should look like:

  public dataArray: Array<DataItem>;
  public timeArray: Array<number>;
  public interval;

  constructor() {
    this.dataArray = // initialize your data here

    // Create an array to store the time for each element and initially fill it with zeroes
    this.timeArray = new Array(this.dataArray.length).fill(0);
  }

  // It's important to know the index to determine which timer to increment
  startTimer(rowIndex) {
    this.interval = setInterval(() => {
      this.timeArray[rowIndex]++;
      // Display the current ongoing timer
      this.display=this.transform(this.timeArray[rowIndex])
    }, 1000); 
  }

  pauseTimer(rowIndex) {
    // alert(this.timeArray[rowIndex]) <-- used for test only
    clearInterval(this.interval); // Stop the interval
  }

Update 2 Considering your latest requirements, you also want to display the timer for each row. Here's how you can accomplish that:

<span class="timer">{{transform(timeArray[rowIndex])}}</span>

In this implementation, we utilize the transform function on the value corresponding to the rowIndex.

Update 3 To address the issue from your previous update, follow this solution:

.. *ngIf="currentState=='start' && currentRowIndex === data.rowIndex"

The use of && ensures the condition applies only to the current row, displaying it exclusively. By removing the operator like so:

.. *ngIf="currentState=='start'"

To reset the timer for a row when pausing, add the following line within the pauseTimer function:

this.timeArray[rowIndex] = 0; // Reset the timer for the specific row

Answer 4

After analyzing your code, it seems like you are consistently updating the variable currentState. When the Start button (anchor) is clicked for the first time, such as in this instance:

(click)="currentState='start'; ....//

You are assigning the value 'start' to the shared variable currentState. Consequently, all instances of ngIf react to this change. I believe what you intend to achieve is having a boolean value that indicates the current state for each row in the table.

Update: Here is an example illustrating what I think you are aiming for:

<div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="startTimer(data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
          (click)="pauseTimer()">Pause</a>
      </div>

Additionally, here is what your Component.ts should look like:

  public dataArray: Array<DataItem>;
  public timeArray: Array<number>;
  public interval;

  constructor() {
    this.dataArray = // initialize your data here

    // Create an array to store the time for each element and initially fill it with zeroes
    this.timeArray = new Array(this.dataArray.length).fill(0);
  }

  // It's important to know the index to determine which timer to increment
  startTimer(rowIndex) {
    this.interval = setInterval(() => {
      this.timeArray[rowIndex]++;
      // Display the current ongoing timer
      this.display=this.transform(this.timeArray[rowIndex])
    }, 1000); 
  }

  pauseTimer(rowIndex) {
    // alert(this.timeArray[rowIndex]) <-- used for test only
    clearInterval(this.interval); // Stop the interval
  }

Update 2 Considering your latest requirements, you also want to display the timer for each row. Here's how you can accomplish that:

<span class="timer">{{transform(timeArray[rowIndex])}}</span>

In this implementation, we utilize the transform function on the value corresponding to the rowIndex.

Update 3 To address the issue from your previous update, follow this solution:

.. *ngIf="currentState=='start' && currentRowIndex === data.rowIndex"

The use of && ensures the condition applies only to the current row, displaying it exclusively. By removing the operator like so:

.. *ngIf="currentState=='start'"

To reset the timer for a row when pausing, add the following line within the pauseTimer function:

this.timeArray[rowIndex] = 0; // Reset the timer for the specific row

Angular - Activate button only on the specific row where it was clicked

Answer №1

Answer №2

Similar questions

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Steps for sending a model and a collection of files to a .NET MVC controller from an Angular version 4 or above application

Change array association with object extension

What is the process for converting a .ts file to a .js file within a Next.js project for Web worker implementation?

A TypeScript function with nested options and a variable rest parameter: The type 'T' is open to instantiation with various subtypes

What could be causing the tap operator to fail to fire in this scenario?

How can I display or hide an ion-icon in the ion navbar based on internet connectivity status?

Placing images inside a div causes them to vanish

Switching from the HTTPS to HTTP scheme in Angular 2 HTTP Service

Retrieving the value of a variable within an object using an Observable

Creating TypeScript versions of `delegate` pattern JavaScript code

Angular `build` is encountering an error when dealing with externals that are declared using `webpack`

Encountered an issue when attempting to post to an ASP.NET Core Web API utilizing Windows authentication

Creating Personalized Validators for Angular Version 5 Reactive Forms

Making a request in Angular to delete data in Express

Is it possible to programmatically alter dropdown values in an Ionic 2 TypeScript file?

Need help updating your Angular2 project to Angular6? Encounter an issue like this: "AppModule" declaring an unexpected module 'HttpClientModule'? Let us assist you with our expert rewriting services

Unable to include option object in the SHA3 function using typescript

Having an issue where Firebase Firestore is showing [object, object] instead of the expected document data. What steps should be

Filtering dates using the Angular Material Date filter on a single adapter