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