How to conceptualize components in Angular?

The ultimate framework
The ultimate framework

There are many posts online with small examples to write components in Angular 2. These examples are good to understand how components work but to write real world applications, it is not sufficient.  In this post, I’ll explain you some concepts that will explain how to conceptualize components in Angular 2.

Angular 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. Please read this post to get source code of a working application and it is also covered up with good explanation via Youtube videos.

The explanation above was my answer to a StackOverflow question that was marked as the best answer.


Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger