Angular2: How granular should components be organized?

Question

For example: I have a component that displays a list of posts. They are being retrieved via a service and are all displayed in one table, one row per post. This is my PostComponent.

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

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

Should I add a new PostFormComponent in a new file and inject in in PostComponent (or where ever I need it)?

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

I know best-practice questions tend to get downvoted but I'm very curious about your approach and the best practice. I know that all three work.

Thanks!

Answer 1

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

• Routable components
• Nested components

Use a nested component when you have functionality that is a part of another "page". Such as a component that displays a star rating or a standard address block. Often these are reusable on multiple pages.

Use a routable component when you want a template that "takes over" all or a significant part of a page. So if you have an application that has a welcome page, post list page, post detail page, and post edit page, each of these would be its own routable component.

And as the prior poster suggested ... check out the Style Guide in the Angular documentation.