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.