Showing loading message on table row in angular2

Question

  <tbody>
    <tr *ngFor="let item of  _studentList let i=index">
    <td  align='center'>{{ i }}--{{item.rollno}}</td>
    <td  align='center'>{{item.sname}}</td>
    <td  align='center'>{{item.status!='NOT'?item.status:''}}</td>
    <td  align='center'>
        <input type='checkbox'   style='height:15px; width:15px;' [checked]="item.status=='P'"  (change)="onChangePA(item)"  ></td>
  <td  align='center'>
   <a><img src='../images/d.jpg' height='30' width='30' /> </a>
 </td>
 </tr>
 </tbody>

When ever i change the checkbox I will do API request, until i get the response I want to either disable that row or showing loading on row

how to do it?

I want only one loading not all. how to do it?

yes I am updating data in database so it take some time so i want to show waiting msg on row so not allow click again on same row before completing first process — User
– User, Commented Jan 18, 2017 at 4:46

Sudheer KB · Accepted Answer · 2017-01-18 05:17:08Z

3

You can make table row as component and disable input as below import {Component, Input} from '@angular/core'

@Component({
  selector: 'table-body',
  template: `

    <td  align='center'>{{ i }}--{{item.rollno}}</td>
    <td  align='center'>{{item.sname}}</td>
    <td  align='center'>{{item.status!='NOT'?item.status:''}}</td>
    <td  align='center'>
        <input type='checkbox' style='height:15px; width:15px;' [checked]="item.status=='P'"  (change)="onChangePA(item)" [disabled]="disableinput"></td>
  <td  align='center'>
   <a><img src='../images/d.jpg' height='30' width='30' /> </a>
 </td>
  `,
})
export class tBody {
  @Input() item:any;
   @Input() i:any;
  disableinput: false;
  onChangePA(val) {
    this.disablebody = true;
//do your stuff 
  }
}

Your main template will be as below

  <table>
  <thead>
  <tr>
  <th>Roll</th>
  <th></th>
  <th>Status</th>
  <th>Action</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of  _studentList let i=index">
      <table-body [item]="item" [i]="i"></table-body>
 </tr>
 </tbody>
 </table>

Plunk Link

answered Jan 18, 2017 at 5:17

Sudheer KB

1,60615 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sudheer KB Over a year ago

Updated plunkr please check now.

User Over a year ago

still not working for mutiple row and your plunkr not showing any output

Sudheer KB Over a year ago

check properly i am able to see plunkr output.

User Over a year ago

ReferenceError: System is not defined console showing this error

Ajey · Accepted Answer · 2017-01-18 05:49:23Z

2

Demo

Basically you will need to have a variable in the component which informs the template whether the api call is initiated or completed.

Initially "showLoading" will be false. Set it to "true" when the api call is being made. After you get the response set it to "false".

And in your template, you will have a "class binding" like this -

<div>
      <div [class.loading]=showLoading>
        I'm a div that wants to be styled
      </div>
      <button (click)="toggle()">Toggle</button>
</div>

class App {
  public showLoading = false;

  toggle() {
    this.showLoading = !this.showLoading;
  } 
}

edited Jan 18, 2017 at 5:49

answered Jan 18, 2017 at 5:01

Ajey

8,25212 gold badges66 silver badges89 bronze badges

6 Comments

Ajey Over a year ago

sorry did not get you?

User Over a year ago

I want to pass different loading for row then above not work for me

Ajey Over a year ago

what different loading? be specific

User Over a year ago

suppose when I click on first rollno checkbox then for only that row showing loading msg same for other it easy to clearify which row updating

Ajey Over a year ago

please put your code in some online editor and I will help you out.

|

jeremysu0131 · Accepted Answer · 2017-01-18 05:00:29Z

1

Maybe try this

In Html:

<input type="checkbox" (change)="onClick()" [disabled]="isDisable" />

In .ts file:

export class YourComponent {

  isDisable = false;

  onClick() {
    this.isDisable = true;
    //Your code here
    this.isDisable = false;
  }

answered Jan 18, 2017 at 5:00

jeremysu0131

113 bronze badges

Collectives™ on Stack Overflow

Showing loading message on table row in angular2

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related