Angular - Modify the Background Color of a Table Row Upon Button Click

Question

Angular - Modify the Background Color of a Table Row Upon Button Click

I am struggling to change the background color of only the selected row after clicking a button. Currently, my code changes the color of all rows. Here is a similar piece of code I have been working with:

HTML

<tr *ngFor="let data of (datas$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse" [ngClass]="{'data-selected':isSelected}">
    <td>{{data.id}}</td>
    <td>{{data.text}}</td>
    <td>
       <a class="mr-3" (click)="delete(data.id)"><i class="fa fa-remove"></i>
            Remove
       </a>
    </td>
</tr>

TS

delete(postId) {
    this.isSelected=true;
    const ans = confirm('TEXT TEXT '+dataid);
    if (ans) {
      this.dataService.deleteData(postId).subscribe((data) => {
        if(data) {
          this.showSuccessDelete();
        } else {
          this.showError();
        }
        this.isSelected=false;
        this.loadDatas();
      });
    }
  }

CSS

.data-selected{
  background-color: #e9eaea;
}

Any help would be greatly appreciated. Thank you!

css angular html-table angular8

Answer 1

Answer №1

You can create a selectedRow attribute in your component class and assign it the value of data.id.

selectedRow: number;

delete(postId, numeroDeposito) {
  this.selectedRow = postId;
  const ans = confirm('TEXT TEXT ' + dataid);
  if (ans) {
    this.dataService.deleteData(postId).subscribe((data) => {
      if (data) {
        this.showSuccessDelete();
      } else {
        this.showError();
      }
      this.isSelected = false;
      this.loadDatas();
    });
  }

}

Then, in the tr tag, use

[ngClass]="{'data-selected': selectedRow === data.id}"

.

Answer 2

You can create a selectedRow attribute in your component class and assign it the value of data.id.

selectedRow: number;

delete(postId, numeroDeposito) {
  this.selectedRow = postId;
  const ans = confirm('TEXT TEXT ' + dataid);
  if (ans) {
    this.dataService.deleteData(postId).subscribe((data) => {
      if (data) {
        this.showSuccessDelete();
      } else {
        this.showError();
      }
      this.isSelected = false;
      this.loadDatas();
    });
  }

}

Then, in the tr tag, use

[ngClass]="{'data-selected': selectedRow === data.id}"

.

Answer 3

Answer №2

If preferred, you can try implementing the following method:

View Live Demo

[class.active]="item.isActive"

and Trigger click event.

(click)="item.isActive = true";

Answer 4

If preferred, you can try implementing the following method:

View Live Demo

[class.active]="item.isActive"

and Trigger click event.

(click)="item.isActive = true";

Answer 5

Answer №3

Instead of creating a separate isSelected variable, consider adding it as a property within the data object like this:

{
    id: 1,
    name: 'AA',
    isSelected: false
}

Then, when the delete function is called with data.id as a parameter, you can toggle it accordingly.

deleteMe(id: string) {
    this.data.map(x => x.isSelected = false);
    this.data.find(x => x.id === id).isSelected = true;
}

Update your HTML to reflect these changes:

<tr *ngFor="let item of data" [ngClass]="{selected: item.isSelected}">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td><button (click)="deleteMe(item.id)">delete me</button></td>
</tr>

For a working example, check out this demo.

Answer 6

Instead of creating a separate isSelected variable, consider adding it as a property within the data object like this:

{
    id: 1,
    name: 'AA',
    isSelected: false
}

Then, when the delete function is called with data.id as a parameter, you can toggle it accordingly.

deleteMe(id: string) {
    this.data.map(x => x.isSelected = false);
    this.data.find(x => x.id === id).isSelected = true;
}

Update your HTML to reflect these changes:

<tr *ngFor="let item of data" [ngClass]="{selected: item.isSelected}">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td><button (click)="deleteMe(item.id)">delete me</button></td>
</tr>

For a working example, check out this demo.

Answer 7

Answer №4

To achieve the desired outcome, you can implement conditional styling.

<div [className]="( checkSelectedRow(i) ? 'example-class' : 'other-class'"></div>

Here is an example of how to do it in Typescript:

checkSelectedRow(rowNumber) : boolean {  
    for(int j=0; j<rows.length; j++){
       if(j==i){
         rows[i]["selected"]=true; return true;
       }; 
    } 
    return false;
}

Answer 8

To achieve the desired outcome, you can implement conditional styling.

<div [className]="( checkSelectedRow(i) ? 'example-class' : 'other-class'"></div>

Here is an example of how to do it in Typescript:

checkSelectedRow(rowNumber) : boolean {  
    for(int j=0; j<rows.length; j++){
       if(j==i){
         rows[i]["selected"]=true; return true;
       }; 
    } 
    return false;
}

Answer 9

Answer №5

To tackle this issue, one approach is to create an array consisting of selected rows like so:

  selectedItemList = []

Subsequently, when the remove button is clicked, add the item's ID to the list:

  selectItem(id) { 
    this.selectedItemList.push(id)
  }

Finally, utilize the ngClass directive in the template to apply a certain class if the item's ID is present in the list:

<tr *ngFor="let data of dataList" [ngClass]="{'selected-data':selectedItemList.includes(data.id)}">
   ....
</tr>

Check out the demo 🚀🚀

Answer 10

To tackle this issue, one approach is to create an array consisting of selected rows like so:

  selectedItemList = []

Subsequently, when the remove button is clicked, add the item's ID to the list:

  selectItem(id) { 
    this.selectedItemList.push(id)
  }

Finally, utilize the ngClass directive in the template to apply a certain class if the item's ID is present in the list:

<tr *ngFor="let data of dataList" [ngClass]="{'selected-data':selectedItemList.includes(data.id)}">
   ....
</tr>

Check out the demo 🚀🚀

Angular - Modify the Background Color of a Table Row Upon Button Click

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the correct way to align my checkboxes with their corresponding labels?

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

Launch the flutter application's web browser and seamlessly navigate back to the app

What is the best way to format my JSON data as a table on the screen?

When a user logs out, Angular assigns a null value to the User object

Navigate through the overlay's content by scrolling

Instead of returning an object, the underscore groupBy function now returns an array

Guide on converting JSON data into a PDF using TypeScript

Tips for positioning dynamic high charts in a bootstrap row

Issue with responsive design: Media queries not applying max-width

Utilizing Isotope JS on your Wordpress website

Customize Cell Styling with Bootstrap Full Calendar CSS

Conceal a Tag with CSS

Encountering issues when verifying the ID of Angular route parameters due to potential null or undefined strings

TypeScript and Angular: Error Encountered when Trying to Combine Two Arrays

Tips for deleting "Category: [category name]" in Wordpress

Creating a button for every individual row within a table using a combination of PHP and HTML

Enhancing Ionic's functionality by including extra access control to permit origin in response headers

Discover the nearest class and smoothly expand it with the slideDown function in jQuery

The media query targeting a specific max-width and below appears to be malfunctioning