Clickable table cells in angular-CodePudding

I have one table with rows. When I click on a cell it has changed color to red but only one at a time can be red. If I click on another cell, the previous cell should no longer be red. I don't know how to make only one cell red at a time. Do you have any ideas?

html file:

<table>
  <tr appFocusCell><td > </td></tr>
  <tr appFocusCell><td> </td></tr>
  <tr appFocusCell><td> </td></tr>
  <tr appFocusCell><td> </td></tr>
  <tr appFocusCell><td> </td></tr>
  <tr appFocusCell><td> </td></tr>
  <tr appFocusCell><td></td></tr>
</table>

focus-cell.directive file:

import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '[appFocusCell]'
})
export class FocusCellDirective {

  constructor(private e:ElementRef,private render: Renderer2) { }
     ngOnInit() {

      }

      @HostListener('click')
  onClick(){
    const div = this.e.nativeElement;
    this.render.setStyle(div,'background','red')
      }

}

CodePudding user response：

You might want to add logic about which row is currently selected, by means of creating a parent directive to bookmark the currently clicked row.

The idea is, with information about which row is currently clicked, this parent directive can remove highlight of the old row clicked and highlight the newly clicked row instead.

Here's a sample solution. I have not tested it, but hopefully the idea behind it is clear.

<table appTable> <!--