How to organize components?

Question

I have a Product component that represents data about product.

Near information is placed component Buttons with two buttons that allow to add product to favourit list and to wish list (FavouriteComponent, WishComponent).

My template representation is:

<app-product>
   <app-buttons></app-buttons
</app-product>

Where to place components FavouriteComponent, WishComponent, inside <app-product> or inside <app-buttons>?

Where to write handler for button? Inside ButtonComponent or upper in parent component?

Could you explain me how to make right decicion?

So you will have 3 buttons in total? 1 in app-buttons and 2 that you want to add? — Reza

Troy Bailey Troy Bailey · Accepted Answer · 2020-03-06T19:55:11

Your template representation looks wrong. it should just be <app-product></app-product> and then in your App Product components html file you'll have whatever html you want in there plus your <app-buttons></app-buttons> element. From the description you give you'll probably want the other component elements placed in this file also. As far as project structure it sounds like you should have something like this from the app-product component:

AppProduct
    L AppButtons
    L FavouriteComponent
    L WishComponent

This is assuming those 3 components will always be used in AppProduct. You should also use a service to perform the logic of adding the products to whatever database the Favourite and Wish Components pull from.

How to organize components?

1 Answers