When a cell is clicked, it should be the only open and focused cell. If another cell is clicked, the previous one should close. Currently, multiple sunsetDate cells can be open at the same time, which is incorrect.
How can this be handled in angular?
#screenshot
https://i.sstatic.net/PXObA.png
#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 passed when cell is clicked
{
"id": 99,
"transactionId": 13517,
"name": "",
"isHeaderCategory": false,
"isRequired": true,
"order": 3,
"editing": true
}