Display a loading component while waiting for the data

Question

How do I display a spinner while I'm waiting for the data to be displayed?

Is there a way to place a custom tag (from spinner component) in the HTML template where I'm waiting for the data?

My project is based on Angular Drupal POC

My list of articles component looks like this:

search() {
    this.sub = this.nodeService.getNodes({ q: this.q })
      .subscribe(
        res => {
          this.nodes = this.filteredNodes = res;
          this.totalItems = this.nodes.length;
        }
    );
  }

basarat · Accepted Answer · 2016-12-07 17:32:55Z

2

ow do I display a spinner while I'm waiting for the data to be displayed?

Have a spinner component bound to some loading property on your controller e.g.

search() {
    this.loading = true;
    this.sub = this.nodeService.getNodes({ q: this.q })
      .subscribe(
        res => {
          this.loading = false;
          this.nodes = this.filteredNodes = res;
          this.totalItems = this.nodes.length;
        }
    );
  }

answered Dec 7, 2016 at 17:32

basarat

278k61 gold badges475 silver badges528 bronze badges

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

Comments

Avnesh Shakya · Accepted Answer · 2016-12-07 17:37:42Z

1

Try something like this:

search() {
  this.isNodeLoading = true;
  this.sub = this.nodeService.getNodes({ q: this.q })
   .subscribe(
     res => {
        this.isNodeLoading = false;
        this.nodes = this.filteredNodes = res;
        this.totalItems = this.nodes.length;
     }
  );
}

and define initially isNodeLoading: boolean= false;

then use in template like this:

<div class="loader-inner ball-clip-rotate" *ngIf="isNodeLoading">
       <div></div>
</div>

Hope this will help you.

answered Dec 7, 2016 at 17:37

Avnesh Shakya

3,9162 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Display a loading component while waiting for the data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related