[Angular] Best practices: single Component or Parent/SubComponents?

[Stefano Bettica]

Hello. I'm quite new to angular. I'm coming from asp.net

I'm trying to learn this framework builnding from scratch a new project.

Now I'm debating about what best structure give to my app

I have a question for you experts, if you can answer and help. I have a page where i display a list of data, a button to insert new record, and each row has a button (gliphyicon actually) to edit the hovered record.

To insert/edit a record I have a ngform with all the fields required.

1st try was a component with a table populated by *ngfor directive, and a ngform placed into a hidden modal div (bootstrap), that I show when new/edit is pushed

2nd try was creating a container component, with 2 sub-components (list and detail). List component has the table with ngfor, Detail component has the ngform. Parent component has selector for list-component and the selector of det-component placed into hidden modal div

1st way is easier imo, 2nd way take the 2 parts divided, so i guess more reusable, but less easy to manage, because i need to pass inputs and listen events. There ìs more corde to write, however sub components remain quite clean, having just html, and only event emitters

what is the best way for you?

[Sander Elias]

Hi Stefano,

I would recommend the second approach, but instead of the inputs/events use a service that manages your models. Just pass the 'id' through an input, or a route, and let the subcomponents handle their own stuff.

Regards

Sander