how to enable selected cell in angular table?

The cell that is currently been clicked should be the only cell opened and focus, and when I click other cell the previous one should close, right now I can open and click multiple sunsetDate cells at a time which is wrong.

How do we handle this in angular?

#screenshot

#html code

<td (click)="editStatus(data, 'sunsetDate' , i)"
                [ngClass]="indexEditing==i && selectedCell === 'sunsetDate' ? 'editing-cell' : ''"
                [ngClass]="!data.isRequired ? 'blank-cell' : ''" class="date-text-right">
                <mat-form-field appearance="fill" *ngIf="indexEditing==i && selectedCell === 'sunsetDate'; else viewSunsetDate">
                    <mat-label>Choose a date</mat-label>
                    <input (blur)="blur()" [(ngModel)]="data.sunsetDate" (keyup.enter)="dateChange(data,'parent','sunsetDate')"
                        (keydown.tab)="dateChange(data,'parent','sunsetDate')" matInput (dateChange)="dateChange(data,'parent','sunsetDate')"
                        [matDatepicker]="picker" #inputField>
                    <mat-hint>MM/DD/YYYY</mat-hint>
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <ng-template #viewSunsetDate>
                    <p> {{data.sunsetDate | date:'MM/dd/YYYY'}} </p>
                </ng-template>
            </td>
            <td (click)="editStatus(data, 'status' , i)"
                [ngClass]="{'editing-cell':indexEditing==i && selectedCell === 'status', 'blank-cell': !data.isRequired && !data.isHeaderCategory , 'uneditable-cell' : !data.isRequired && data.isHeaderCategory}"
                style="text-align: center;">
                <mat-form-field style="width: 100px; height: 30px;" appearance="fill"
                    *ngIf="indexEditing==i && selectedCell === 'status'; else viewStatus" autofocus>
                    <mat-select (blur)="blur()" (openedChange)="openedChange($event, data, 'parent' , 'status')" [(value)]="data.status">
                        <mat-option *ngFor="let status of statuses" [value]="status.viewValue"> {{status.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <ng-template #viewStatus>
                    <p> {{data.status}} </p>
                </ng-template>
            </td>

#ts code

@ViewChild('editDatePickerInputCell') editDatePickerInputCell:any;

     editDateTest(value: EntitlementTransactionTemplateDto, columnName: string) {
        value.editing = false
        value.editing = !value.editing
        this.selectedCell = columnName
    
        console.log('columnName' , columnName)
        console.log('Value' , value)
    
    
        if (value.editing) {
          setTimeout(() => {
            this.focusOnEditCell();
          }, 0)
        }
      }

      focusOnEditCell() {
    setTimeout(()=>{
      if(this.editDatePickerInputCell)
        this.editDatePickerInputCell.nativeElement.focus();
    },500); 
  }

#sample object being passsed when cell is clicked

{
    "id": 99,
    "transactionId": 13517,
    "name": "",
    "isHeaderCategory": false,
    "isRequired": true,
    "order": 3,
    "editing": true
}

Answer

Instead use “data.editing” use a variable

indexEditing:number=-1;

So, you use:

  <!--you check agains indexEditing-->
  <mat-form-field *ngIf="indexEditing==index && 
               selectedCell === 'sunsetDate'; else viewSunsetDate">
      ...
  </mat-form-field>

In your function

editDateTest(value:EntitlementTransactionTemplateDto,index:number, columnName: string){
   this.indexEditing=index;
   ...
}

When you end editing, simply

dateChange(...){
  this.indexEditing=-1;
  ...
}

(*)If you has a *ngFor you simplly use

  <ng-container *ngFor="let data of yourList;let index=index">
  </ng-container>

If you’re using mat-table, see that you use

<td mat-cell *matCellDef="let element; let index = index;">
  ...
</td>