Add a class on item selection and remove it to add on another element selection

Question

I have a table that shows me a list of item. I want to be able to add a class on the selected item and remove it when I select another one.

Here's my template:

<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>

Here's my ts code:

 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');
  }

Also "event" is deprecated, but I can't figure out what to use instead.

Answer 1

you can do something like that

<div *ngFor="let item of items" [class.is-selected]="item === selectedItem" (click)="selectedItem = item">{{ item.name }}</div>

Answer 2

you can try another way also, *.html

<div
  *ngFor="let item of items; let idx = index"
  [ngClass]="{ selected: activeIdx == idx }"
  (click)="handleActiveRow(idx)"
>
  {{ item.name }}
</div>

and also *.ts file looks

  public activeIdx: number | null = null;
  public items: Array<any> = [{ name: 'hitee' }, { name: 'krish' }];

  public handleActiveRow(event: any) {
    this.activeIdx = event;
  }

and also *.css looks like,

.selected {
  background-color: blueviolet;
}