I have an Angular application following a Feature-Based Architecture. I need to create a shared component that will be used across multiple feature components. This shared component should call an API to fetch data from the backend server.
However, I am concerned about potentially violating the Feature-Based Architecture principles if I allow the data access layer to interact directly with a dumb components layer.
Would this approach break the architectural principle, and if so, what is the best way to handle such a scenario while maintaining good architectural practices?
If your shared component is a presentation (dumb) component, then it shouldn't call api service. The point of this architecture is that smart components gather all data, and provide that data as an input to the dumb components.
There's few ways to approach your scenario. For example you could create a smart component that will wrap your shared component. Then call API in the wrapper component. And you can then use that wrapper component in shared component. This is fine, because there might be few layers of smart components
I don't know details of your case, but you could read this post to see different examples of how to handle smart-dumb components - https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/