CODEWITHSUNDEEP
javascriptperformanceangularangular2-services
Vish
Vish

Reputation: 319

Load Multiple Child Components using angular 2

I have a requirement wherein I call an external API to get a list of Ids for my child components and for each Id, I go out another external API to fetch the details of the child.

My Angular code in the parent component looks like this 

 <div *ngFor="let link of result | objToArr">
        <details #Details [Id]="link.id"></details>
</div>

The result is the result I get from the first API cal and in the child component the [Id] above is an Input variable. I call the details API call on ngInit of the child component. Something similar to 

                this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
                    res => {
                        this.result = res.json().detail;
                        this.units = this.result.unit;
                        this.meterIdonLoad = this.Id;
                    });

This works for the most part, but there are multiple calls going out at the same time to fetch the details and the browser queues up the calls resulting in a rather unacceptable wait period for the whole page to load. Below is the network logistics for a single call. Network Log from Chrome.

Is there a Better way to improve response times for the page/redesign the page ?

The individual calls through postman for the dtails takes anywhere from 50-80 ms, so the problem is not with the API server.

Any help is much appreciated.

Upvotes: 1

Views: 673

Answers (1)

CharanRoot
CharanRoot

Reputation: 6325

I think you should change your design based on your requirement

1) if your requirement is have all child details while loading page than your backed should handle the operation.

2) if your requirement is you can show some child details and reaming details once user started scrolling than you can use virtual scroll (https://github.com/rintoj/angular2-virtual-scroll)

3) if your requirement is you need show user detail after selecting child component than you can fire each individual request after select operation.

Upvotes: 1

Related Questions