I'm a bit new to angular and html so I don't really know what the best ways to do certain things are. Specifically, I want that when clicking on a row of a table, the row changes its style. So far I have only seen two options or make two divs in the html
<table cellspacing="0">
<tr>
<th width="5%"></th>
<th width="25%">CÓDIGO</th>
<th width="30%">DESCRIPCIÓN</th>
<th width="10%">CANT.</th>
<th width="10%">PRECIO</th>
<th width="10%">DTO.(%)</th>
<th width="10%">IMPORTE</th>
</tr>
<tr *ngFor="let venta of ventas; let i = index">
<div *ngIf="selectedRow == i" class="selectedRow">
<td (click)="cambiarSelecion(i)"></td>
<td (click)="cambiarSelecion(i)">{{venta.id}}</td>
<td (click)="cambiarSelecion(i)">{{venta.description}}</td>
<td (click)="modificarCantidad(valorCelda, i, true)">
<div *ngIf="rowEdit == i">
<input type="text" [(ngModel)]="valorCelda" (blur)="modificarCantidad(valorCelda, i, false)">
</div>
<div *ngIf="rowEdit != i">
{{venta.qty}}
</div>
</td>
<td>{{formateaValor(venta.price)}}</td>
<td>{{formateaValor(venta.discount)}}</td>
<td>{{formateaValor(venta.qty*venta.price*(1 - venta.discount/100))}}</td>
</div>
<div *ngIf="selectedRow != i">
<td (click)="cambiarSelecion(i)"></td>
<td (click)="cambiarSelecion(i)">{{venta.id}}</td>
<td (click)="cambiarSelecion(i)">{{venta.description}}</td>
<td (click)="modificarCantidad(valorCelda, i, true)">
<div *ngIf="rowEdit == i">
<input type="text" [(ngModel)]="valorCelda" (blur)="modificarCantidad(valorCelda, i, false)">
</div>
<div *ngIf="rowEdit != i">
{{venta.qty}}
</div>
</td>
<td>{{formateaValor(venta.price)}}</td>
<td>{{formateaValor(venta.discount)}}</td>
<td>{{formateaValor(venta.qty*venta.price*(1 - venta.discount/100))}}</td>
</div>
</tr>
</table>
Or put the style in the angular file and make a function that changes the style using the [ngStyle] attribute. I dislike both options quite a bit since I already have a very long html document (please note this is only part of the html) and copying and pasting the same div twice makes the whole code even more unreadable and more of the same in the angular file. I've been thinking and it occurred to me that if I could somehow put the *ngIf together with the [ngStyle] I could pick the style, but I haven't found much on the internet. Any other alternative method will be well received.
Thank you very much in advance
PS: selectedRow is the variable (of type number) that saves the selected row of articles, which is an array, changeSelection changes the value of selectedRow to the one passed by parameter.
It shouldn't be that hard if you use something like this:
It should work perfectly, in theory if the selectedRow variable is equal to the index , which in this case is i , the selectedRow class should appear , of course it depends on the programming of the function you have called changeSelection(i)
I hope I've helped.