Reputation: 3451
I have the following table:
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Url</th>
<th>Registration Status</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let url of urls">
<td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td>
<td>{{url.StatusText}}</td>
<td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/><span *ngIf="updateInProgress">Running...</span></td>
<td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td>
</tr>
</tbody>
</table>
When the user clicks on a button on a particular row, I went to show a progress spinner next to it. The problem I am having is if I add a progress spinner place holder and set it to something, it will show for every row.
Also, is it possible after an operation is complete, I can just update part of the table. Currently I am retrieving data from the server again, but I feel this is overkill. For example, if I update row 3 and I now want to set the status to complete on row 3, can I access the current value for the status at row 3 and just update that instead of going to the server and getting the updated data?
Upvotes: 1
Views: 2182
Reputation: 22458
You have to do something like the following:
<tr *ngFor="let url of urls">
<td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td>
<td>{{url.StatusText}}</td>
<td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/><span *ngIf="url.updateInProgress">Running...</span></td>
<td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td>
</tr>
Notice to *ngIf="url.updateInProgress"
Also, is it possible after an operation is complete, I can just update part of the table.
Of course, yes.
P.S:
You don't need work with index, just work with url
in your removeUrl
or Register
.
e.g:
private removeUrl(url) {
url.updateInProgress = true;
...
}
Upvotes: 1
Reputation: 10124
I assumed you have something similar to span with spinner class which shows your spinner. When the user clicks to the button, find the exact span with id selector and add spinner
class to it.
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Url</th>
<th>Registration Status</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let url of urls">
<td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td>
<td>{{url.StatusText}}</td>
<td><span id="url_{{url.Id}}"> </span></td>
<td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/></td>
<td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td>
</tr>
</tbody>
</table>
and typescript code would be like this:
Register(id,url,status){
$('#'+id).addClass('spinner'); //the spinner will spin while the
this.someAPI.someOperation().subscribe(() => {
//success
},
()=> {
//error
},
() => {
//complete
$('#'+id).removeClass('spinner');
});
}
Note that: it is not adviced direct DOM manipulation like I did now. You might want to use ElementRef
.
Upvotes: 0