Issue
Currently learning Angular and in need of some assistance.
So I have a table that looks like this:
This is how I populate the table:
<tbody>
<tr *ngFor="let cus of customers;" [ngClass]="{'disableRow' : isDisable}" [attr.id]="'row'+i">
<td>
<span *ngIf="!cus.editCell">{{cus.name}}</span>
<input type="text" class="form-control small cellStyle" [(ngModel)]="cus.name" *ngIf="cus.editCell" />
</td>
<td><span *ngIf="!cus.editCell">{{cus.address}}</span>
<input type="text" class="form-control small cellStyle" [(ngModel)]="cus.address" *ngIf="cus.editCell" />
</td>
<td><span *ngIf="!cus.editCell">{{cus.city}}</span>
<input type="text" class="form-control small cellStyle" [(ngModel)]="cus.city" *ngIf="cus.editCell" />
</td>
<td>
<div class="btn-toolbar">
<button class="btn btn-primary small" title="Edit" (click)="editRow(cus)"
*ngIf="!cus.editCell"><fa-icon icon="pen-to-square"></fa-icon></button>
</div>
</td>
</tr>
This the button function:
editRow(row: any){
row.editCell = !row.editCell;
this.tempName = row.name;
this.tempAddress = row.address;
this.tempCity = row.city;
}
So what happens now is that I click on the little edit button and I get to edit the cells in that table row, great!
However, I'm also able to click on the edit button on the second row, not so great...
So basically, I'm trying to find a way to disable all other rows (imagine there like 10 more) while editing.
I just want to add this CSS to the other rows.
.disableRow{ opacity:0.5; pointer-events:none;}
If this is a terrible way to do it, I'm open for other suggestions.
I just want to prevent the ability to edit two or more rows at the same time.
Thanks in advance!
Solution
With *ngFor loop, you can also track the id of your current row. https://angular.io/api/common/NgFor
*ngFor="let item of items; index as i"
- You could use this index to track which row is being updated, storing it outside of your row object.
- Then you could use this index to show or hide span names
- The stored index of the currently updated row must be set when clicking on button to edit row
- The stored index of the currently updated row must be cleared when validating the row. Otherwise you can't leave the row. This is not present in your actual code
- As other columns, button one could be split in 2: one button to enter in line update mode when the line is not being updated, one button to validate the line/leave line update mode when the line is being updated
- I don't think that you need the style, you simply need to disable the "enter in line update mode" button with its disabled property when an other line is being updated. This will gray the button and ignore actions when user clicks on it
- Once you've done all that, you'll see that you have something like
*ngIf="isLineBeingEdited(index)"
and*ngIf="!isLineBeingEdited(index)"
for one<td>
. This means you are evaluating two times the same condition, but you can do better evaluating it only one time with an if else https://angular.io/api/common/NgIf
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
- Now you have one if/else bloc for each column of the row, this can also be optimized: you can have one big bloc if you are not updating the row, and one big bloc else (when you are updating the row). In order to not add a useless div in the dom (to put the ngIf on), you can use a ngContainer https://angular.io/api/core/ng-container
<ng-container *ngIf="!isLineBeingEdited(index); else editingRow">
<td><span>{{cus.name}}</span></td>
<td><span>{{cus.address}}</span></td>
... ETC
</ng-container>
<ng-template #editingRow>
<td>
<input type="text" class="form-control small cellStyle" [(ngModel)]="cus.name"/>
</td>
<td>
<input type="text" class="form-control small cellStyle" [(ngModel)]="cus.address"/>
</td>
... ETC
</ng-template>
Good luck, you can do it! :)
Answered By - Grogu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.