Angular2: What granular components should be organized?

Question

For example: I have a component that displays a list of messages. They are retrieved through the service and displayed in a single table, one row per message. This is my PostComponent.

Now I also want to edit posts and include a form for this.

Should I add a form to my PostComponent and use one component for both?

Should I add a new PostFormComponent to the new file and inject it into the PostComponent (or where I need it)?

Should I define the second component in the same file as the PostComponent?

I know that issues related to best practice tend to decrease, but I am very curious about how you feel about your approach and best practice. I know that all three work.

Thanks!

Answer 1

There are basically two types of components to build in Angular 2:

• Routable components
• Nested Components

Use a nested component when you have functionality that is part of another “page”. For example, a component that displays a star rating or a standard address block. Often they are reused across multiple pages.

Use a routable component if you want a template that "captures" the entire or a significant part of the page. Therefore, if you have an application that has a welcome page, a message page, a detailed page, and the publication of an edit page, each of them will be its own routable component.

And as the previous poster suggested ... see the style guide in the Angular documentation.

Answer 2

I cannot fully understand your specific use case (do not try hard ;-)), but in general, an Angular component such as a class should do one thing and do it well. In addition, there is not much to think about whether to create several or only one component. This usually means more components are better.

Angular2 style guide (I did not find a guide to detailing the components, although there are many other useful dos and don'ts)
Added here for better visibility. Thanks @lexit for the tip!