I find Angular 2 components very nice, as we can write down our own HTML elements that are suited for the app we are building, however, since I'm getting started with Angular 2, I feel I'm using them the wrong way around.
The way I've been using components, and that I've seem other people doing, is to make a 1-1 correspondence between components and views.
In other words, for each view of the app, one creates exactly one component and use the router to trigger the active component.
So in this setting one would have components like this:
And so forth. I mean, this works, but I feel like it is the wrong way to use components. It seems to me that somehow components should be more granular than that.
How should one correctly decide what must be a component in Angular 2? Should one really make this 1-1 mapping between components or view? If not, what is the right way to decide what components we need to build?
A good rule of thumb is to avoid duplication. If you find yourself copy-pasting code - extract that code in a component.
Another rule is simplicity. If a component class becomes too big - split it smaller independent parts.