Manipulate Html table with Angular

Question

very simple what is the equivalent of this jQuery code $('#message tr').eq(index).addClass('negative') in angular, or how can i achieve the same result with angular can't use [class.bind] the above job should be done in by clicking the button. the button will pass some data to the function and based on some condition and checking the negative class will be added to the related row not to all of them.

Angular works using variables you define in .ts and use in your .html. So, in general you not select the html element using jQuery selector, else in your .html you binding the atributes to variabes and change this variables. e.g. declare a variable `indexSelected:number=-1` and use in .html `` and `..` — Eliseo, May 26 '22 at 22:24
the solution you provide will not work, because suppose my html table has 10 rows and by clicking the button which is `(click)="diifer(data)"` the data inside differ method is a collection and inside the component this will iterate and find the difference between values and it find then the negative class will be added to related row which each td has different values or at least on td has different value amont other, not to all 10 rows — Mohammad, May 27 '22 at 01:32

score 0 · Answer 1 · edited May 27 '22 at 17:33

You have not added any code, so I imagine you have something like:

<table>
  <tr *ngFor="let data of arrayData;let i=index" [class.negative]="indexSelected==i">
    <td>{{data?.prop1}}</td>
    <td>{{data?.prop2}}</td>
    <td><button 
        (click)="indexSelected=(indexSelected==i)?-1:i;
                      indexSelected!=-1 && diifer(data)">
        select
        </button>
    </td>
  </tr>
</table>

(or instead use a button add the "click" to the <tr>)

You can also pass the "index" to the function diifer like

(click)="diifer(data,i)"

And

diifer(data:any,index)
{
   this.indexSelected=this.indexSelected==index?-1:index
   if (this.indexSelected!=-1)
   {
       ...do something..
   }
}

NOTE: See that you check if indexSelected is the "row" you select. If true, you "unselect" making indexSelected=-1

NOTE2: remember that index goes from 0 to arrayData.length-1

Manipulate Html table with Angular

1 Answers1