Tengo una tabla que me muestra una lista de elementos. Quiero poder agregar una clase en el elemento seleccionado y eliminarlo cuando seleccione otro.
Aquí está mi plantilla:
<div class="row"> <div class="col-10 pl-3"> <h1>My Shopping List</h1> <h3 class="mb-0">Add all the ingredients you need</h3> <app-shopping-edit></app-shopping-edit> <table> <tr> <th>Ingredient</th> <th>Amount</th> </tr> <tr *ngFor="let ingredient of ingredients; let i = index" (click)="onEditItem(i)" > <td>{{ ingredient.name }}</td> <td>{{ ingredient.amount }}</td> </tr> </table> </div> </div>Aquí está mi código ts:
onEditItem(index: number) { this.shoppingListService.startedEditing.next(index); this.addStyleOfSelection(event); } addStyleOfSelection(event: any) { let selection = event.target; let trSelected = selection.parentNode; trSelected.classList.toggle('selected'); }También "evento" está en desuso, pero no puedo averiguar qué usar en su lugar.
puedes hacer algo asi
<div *ngFor="let item of items" [class.is-selected]="item === selectedItem" (click)="selectedItem = item">{{ item.name }}</div>también puedes probar de otra manera, *.html
<div *ngFor="let item of items; let idx = index" [ngClass]="{ selected: activeIdx == idx }" (click)="handleActiveRow(idx)" > {{ item.name }} </div>y también se ve el archivo *.ts
public activeIdx: number | null = null; public items: Array<any> = [{ name: 'hitee' }, { name: 'krish' }]; public handleActiveRow(event: any) { this.activeIdx = event; }y también parece *.css,
.selected { background-color: blueviolet; }