Angular 2 - How to choose what represents a component and child component in a page?

Question

Starting a Project using Angular2, I wanted to know if any of you knows how to distinguish components and sub component. How are we supposed to settle on the following architecture's decisions :

1. When does an element should be represented by a component ? when start using subcomponent ?
2. When to choose to communicate via services between components ? when to choose Input and Output directives ?
3. what should be considered a module rather than a component ?

Answer 1

This kind of a vague question, because there's no golden rule for everything.

1. When does an element should be represented by a component ? when start using subcomponent ?

What is a component? If we look at the dictionary: a part or element of a larger whole The idea of components in Angular is that they encapsulate all the logic, allowing you to reuse them across your application. Rule of thumb T-DRY (Try to be DRY), don't repeat yourself, if you keep using the same logic on several components, maybe you could extract that into a single component and re-use that component instead. Also it's a nice way to reduce your html markup, for example looking at stack overflow we could have the answer/question component, the markup is the same for both. But in this component we would probably would have some child components, like the voting component, the profile component, the tags component.

2. When to choose to communicate via services between components ? when to choose Input and Output directives ?

This one is simple, you only use Inputs and Outputs when your component it's only used as a direct child and the parent is the one responsible for providing the logic or data. Why? If you have a route that points directly to your component, you can't have inputs and outputs. Another reason is if your component is a deep nested grand grandchild, you don't want to keep passing your outputs/inputs through your components, that's too cumbersome.

3. what should be considered a module rather than a component ?

I advise you too read the official Angular 2 style guide, there's the section app structure & modules basically the idea is to create modules per features, or in case you have a simple app per url. Here's a quote from that section:

Do create an Angular module for all distinct features in an application (e.g. Heroes feature).

Do place the feature module in the same named folder as the feature area (.e.g app/heroes).

Do name the feature module file reflecting the name of the feature area and folder (e.g. app/heroes/heroes.module.ts)

Do name the feature module symbol reflecting the name of the feature area, folder, and file (e.g. app/heroes/heroes.module.ts defines HeroesModule)

Why? A feature module can expose or hide its implementation from other modules.

Why? A feature module identifies distinct sets of related components that comprise the feature area.

Why? A feature module can easily be routed to both eagerly and lazily.

Why? A feature module defines clear boundaries between specific functionality and other application features.

Why? A feature module helps clarify and make it easier to assign development responsibilities to different teams.

Why? A feature module can easily be isolated for testing.