CODEWITHSUNDEEP
angular
Artur. K.
Artur. K.

Reputation: 55

Should components load their own data in angular2

My app has a home page which contains a complex datatable component. Currently the home component loads all the services and then injects them into the datatable which is fairly simple but becomes more complex when I have to load some data on lets say a row click event.

My question is: Is it better if the page loads services and then injects the data into the components or should components worry about it themselves? I want to start of with best practise and avoid any future pitfalls

Upvotes: 3

Views: 1332

Answers (2)

KKS
KKS

Reputation: 3630

It is a decision that you will have to make for each component based on the scenario as it is all down to the use case.

I'd say your component(s) should just consume the service(s) and request data. It shouldn't care how & from where the data is retrieved as it is down to service to handle the how & where part.

Think about your components as smart and dumb components.

Smart (Stateful) component consumes service(s) to fetch data and uses that data in its template.

Dumb (Stateless) component will be used just for presentation to the user and expects data through input binding as property. So, this component will always expects data from a parent component. If it gets all the required data using bindings, it will just work anywhere in your app.

Concept of component:

The idea behind the concept of components is to make small parts of your application and make them reusable. So that's a decision that you will need to make how reusable you want your component to be.

Example: We have a product-list component and product-detail component. product-list component consumes a service named ProductService to get data.

Case-1: If your app just needs to have a view where product-detail will always exist inside product-list component as a nested component, you just need to make this list component a smart component.

When a product item is selected, it passes that item to the product-detail component using an input property named product.

In this case, you will not need to make another HTTP call to get the product detail, if all info the user needs was already present in the first call.

If say you only had subset product info of selected product, then look at case 2 below.

Case-2: If your app may need to have product-detail elsewhere without a parent list, then allow this product-detail component to consume service directly.

So, that this will be a standalone component and doesn't need to rely on any other component.

This component just needs a product id as input and it will consume service to get product detail for that product id. So, this component can be used anywhere in the application including inside product-list component where you just pass the id of selected product to this component.

I have a blog post that uses the product-list and product-detail component where both consumes a service to get data.

Upvotes: 6

snorkpete
snorkpete

Reputation: 14574

This is the whole 'smart vs presentational' components (or stateful vs stateless components) discussion again. Angular University has a blog article about this if you want to read more.

The basic advice is to limit the number of components that interact with data retrieval services and have as many of your components as you can receive their data from inputs and send data out as outputs. A component that does this is considered stateless/presentational/dumb because all its data is coming solely from its inputs. It's like a pure function in a programming language - a pure function is easier to reason about because it has no side effects and its return value depends solely upon its inputs.

If the majority of your components are set up as presentational/dumb components, it hopefully leads to a less complex system to reason about.

Upvotes: 4

Related Questions