Angular 2 Best Practices - Which HTML piece is qualified as component

Question

If I have one service returning multiple data points and these needs to be displayed in multiple html parts (in below case its three). What is the best way to organize & architect this ?

Kindly note that here Sections and Properties always displayed together.

There are three options, and I am bit confused between 1st and 2nd, which one to opt for.

1. Create three Components : TemplateComponent, SectionsComponent & PropertyComponent ?
2. Create two components : one Component for Templates and another component for Sections and Properties ?
3. Create one component : one component for all three sections.
4. ?

We are using Angular~2.0 with CLI.

Sample Service Response

Template_A  
     - Section 1
       - Property a
       - Property b 
     - Section 2
       - Property a
       - Property b
Template_B
     - Section 1
       - Property a
       - Property b 
     - Section 2
       - Property a
       - Property b

Sample UI

Answer 1

You can create a Base Component and Create as many child Components Required and Pass the Data to Child Components.

In you case, you will create three components.

1. TemplateComponent
2. SectionsComponent

3. PropertyComponent

   • SectionsComponent will be a child component of TemplateComponent which will receive Sections Data as input.
   • PropertyComponent will be a child of SectionsComponent which will receive Properties Data as input.

Refer to https://angular.io/guide/component-interaction for more info.