CODEWITHSUNDEEP
angular
xaisoft
xaisoft

Reputation: 3451

Only update a particular row in a table angular 4?

I have the following table:

<table class="table table-striped table-bordered table-condensed">
  <thead>
    <tr>
      <th>Url</th>
      <th>Registration Status</th>
      <th>&nbsp;</th>
      <th>&nbsp;</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

Answers (2)

Mohammad Dayyan
Mohammad Dayyan

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

omeralper
omeralper

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>&nbsp;</th>
      <th>&nbsp;</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

Related Questions