0

This is just an advice based question. I really want to make my dashboard fast. So, need help for fetching and sharing local and server based data among parent and child components.

Dashboard features-

1)The data will be one Metadata(json format in assets folder)that will contain height, width, color, some event based data . 2) The main and important data will come from server for charts and each component. 3) There are 7 tabs and each has several components like:-

tab-1

It contain 5 component placed over a parent component parent.component.ts by their selector and injecting data through their input property in selector.

tab-2

It contain 8 component placed over a parent component parent.component.ts by their selector and injecting data through their input property in selector.

On the whole, there are components of tab1,tab2, tab3.....on the parent.component.html and router outlet for dashboard is on app.component.html

'
'
'

Data fetching ,sharing Strategy to minimize no. of ajax calls from service

What should be strategy here to fetch data in parent.component.ts and share among all components or any help idea and strategy will be appreciated considering above scenario.

The problem, I am facing is to bring data simultaneously(at once)- like some data is coming from server and its 'color' is coming from 'metadata' in local folder. How to do that?

Improve this question

2 Answers 2

Reset to default
1

Tabs seem like the job for the router. Split your tabs into separate module and merge common functionality into one or several "shared" module. This ensures that users who do not visit a page with a certain features will not download any code user to implement that feature.

Note that since you're using router, sharing common data will have to be done via services instead of inputs (since your children will not actually be present in the templates, hence there is no concept of "inputs").

For minimizing the number of API calls, you need to implement some sort of caching mechanism. Some questions to think about:

  • How often do you expect data to change?
  • Is this data above the fold?
  • How long do you expect user to wait to get the data?
  • How important this data is for your page?
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The problem, I am facing is to bring data simultaneously(at once)- like some data is coming from server and its 'color' is coming from 'metadata' in local folder. How to do that, so that no effect is present on dashboard.
1

If you are fetching the data from the parent component you can have a single service there and in the subscribe you can create attributes on your component that are the data you need for each of the child components. Then on the html for the components you have an @Input attribute and pass each component only the data it needs. Since the components are in essence dumb they 'should' be more performant. Since your data is only requested on the parent component you're only making one xhr request.

Per the note about color and data showing up at the same time. If you have a ‘canActivate’ on your components you can throw up a loading indicator until your data and meta data are fetched. Then pass both of them along as attributes on child components like above.

Improve this answer

2 Comments

Beware that this will no allow for lazy loading your tabs.
absolutely true, however if he has already loaded his charting library and the data for all of the charts in his parent component the extra bytes from the other tabs and configurations of the components may be lighter and faster than the amount of time it takes for the lazy loaded module to come across the wire separately and get bootstrapped. Obviously it's conjecture without actually knowing the size of his tabs / the exact code involved. Lazy loading does help with initial load times though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.