CODEWITHSUNDEEP
angularperformance
Jawadh Salih Rifath
Jawadh Salih Rifath

Reputation: 150

How to efficiently Load needed values from the database to an angular component?

I am searching of a way to populate data on an angular component. I have to load data for several dropdowns in a single component. So is it better to load the values on demand or load them at first when the component is drawn. Or is there any otherway to acheive this so that I can show the user a minimal delay of rendering components and data.

Thanks in advance. 

ngOnInit() { 
      this.loadAvalues();
      this.loadBvalues();
      this.loadCvalues();
      this.loadDvalues();
      this.loadEvalues();
      this.loadFvalues();
}

or

Call these methods when the action is triggered.

Upvotes: 0

Views: 266

Answers (2)

gaurav soni
gaurav soni

Reputation: 206

You should fire calls on OnInit. As these are independent calls it will not block the UI to render.

You can disable the dropdown until data loads or show some loading message that looks similar to dropdown and once data comes then render the dropdown with actual data.

If you open it on clicking on the dropdown, then it will show some delay to the user which might not be good user experience.

Even if you cache the result, the first time when you open each dropdown user needs to wait for data for each dropdown, but if they are independent, chances are when the user opens the first dropdown, at that time might be other calls get resolved and your data populates.

Upvotes: 1

Tobin
Tobin

Reputation: 2018

For creating the local 'cache' of rendering data; it somewhat depends how much data you are loading, and what it is displaying as. When you do the fetch it is async but it will re-render after each model change; if that is a problem these could be all wrapped in a Promise.all([this.loadAValues ... ]).

As it's a dropdown one does not expect any loading time so it's prudent to load it first. However it's not immediately necessary to have the data so it can load a little after you have finished rendering any interactions.

Upvotes: 1

Related Questions