Organizing components into modules
As we learned in Chapter 3, Component Interaction and Inter-Communication, Angular 10 applications are represented as a tree of components. The top main component (usually dropped somewhere in the main HTML index file) acts as a global placeholder where child components turn into hosts for other nested child components, and so on. Modern web applications based on web component architectures often conform to this sort of tree hierarchy.
There are distinct advantages to this approach. On the one hand, reusability does not get compromised, and we can reuse components throughout the component tree with little effort. Secondly, the resulting granularity reduces the burden required for envisioning, designing, and maintaining larger applications. We can simply focus on a single piece of UI and then wrap its functionality around new layers of abstraction until we wrap up a full-blown application from the ground up.
Alternatively, we can approach our...