How can I ensure a [shared] component is truly a dumb component? (Angular)

Issue

I'm working on a project for work where I'm trying to segregate unnecessary api calls, logic and other code which could otherwise duplicate work, or make the application slow and hurt performance. To be honest, removing api calls from shared components was the first step. However I'm looking for some guidance on the best practices I can follow.

For angular specifically, are shared components allowed to make navigation calls? I'm aware that api calls should be avoided (maybe it might just be the nature of the application I was working on) , again, I would appreciate any thoughts anyone has or links to readings.

Also it's pretty obvious by my question that I'm new to angular and still a beginner in coding

Solution

Dumb Components are usually used for presentational purposes. They can not include heavy logic. To make sure the your component is really dumb, try checking the following:

1. Your components is mainly interested in the UI, meaning it's used to present data in an elegant way. It usually gets this data from its container component using input variables (the ones decorated with @Input).
2. If the component needs to perform a particular action that requires heavy logic, it should delegate that to its container component using @Output.
3. Try not make HTTP calls or subscribe (use the async pipe instead) inside your dumb component.

I would advise you have a look at those videos here and here from Joshua Morony, they helped me a lot

Answered By - Ahmed-El-Bald