Angular page composed of several components

Question

When working with Angular projects the use of componentes brings several benefits, however, these benefits can lead you to make some mistakes, which may only be seen a few lines of code later.

Would it be correct to create a page composed of several components? or, the essence of the component is linked to functionality and reuse of code snippets?

Example: courses.component.html:

<app-level-one></app-level-one>
<app-level-two></app-level-two>
<app-level-three></app-level-three>
<app-level-four></app-level-four>
<app-level-five></app-level-five>

As can be seen, the page above is composed of 5 other components, in this example the above components do not bring any different functionality, only encapsulate a code snippet htmland css.

After all, would that approach be right? or in this case, where there is no special functionality and no reuse of code snippets, only the encapsulation of html and css, we should have a single component?

Answer 1

The information below is from official style guide and from my experience but overall in relation to component architecture depends a lot on the application also and despite good practices there is no silver bullet.

According to the stule guide, the single responsability principle should be followed, meaning that each component should only be concerned with one thing. This is relative but gives you an idea of how to separate its components. But overall I think the more components you divide the better.

The way I like to do is to have low-level components in a Shared -> buttons, inputs etc...

Inside my Features have container components that have the logic to take data from BE etc...

And then pass that data to block components that only display that data and emit events. following the standard of smart and Dumb Components that you find a lot on the internet.