Hierarchy for multiple components in Angular?

Question

Regarding to this question I have a look at Master/Detail Components page but there is not enough information about this. In addition to that there is also another great tutorial for Angular folder hierarchy on Angular Folder Structure but that is also not covering my question.

I have three components (let's call them) ComponentA, ComponentB and ComponentC and I want to merge all of them in another components called ComponentX as shown on the image. As the data is different for each of 3 components, I need to separate all of them with 3 components with the following hierarchy:

-ComponentX (folder)

    -ComponentA (folder)
        -componentA.html
        -componentA.ts
        -componentA.model.ts

    -ComponentB (folder)
        -componentB.html
        -componentB.ts
        -componentB.model.ts

    -ComponentC (folder)
        -componentC.html
        -componentC.ts
        -componentC.model.ts

    -componentX.html
    -componentX.ts
    -componentX.model.ts ???

Is this hierarchy approach is correct? On the other hand if Component X is just a panel can we use componentX.model.ts if a model data that is used for general purpose for all of 2 or 3 components (A, B and C) need to be retrieved? Which approach should I follow? And what is the best way in order to share data between two components i.e. master-detail? service or input-output approach? Any help would be appreciated...

Answer 1

I'm telling you how I would have done it, but that's subjective, so consider using this if it suits you, otherwise feel free to use something else.

What I would do is create an interface (or if the components are almost identical, a super class) like this :

export interface ComponentX {
  title: string;
  data: any[];
  headers: string[];
}

Now, your components would have to implement that, and they can all use the same template/style :

@Component({
  selector: 'comp-A',
  templateUrl: '../component-X.component.html',
  styleUrls: ['../component-X.component.scss']
})
export class ComponentA implements ComponentX {
  title = 'Component A';
  data = [];
  headers = ['ID', 'full name', 'phone number'];
}

This way, all of your components would be forced to have the properties of your interace, and since the properties will remain the same, you will only need one template/CSS file.

The folder structure would look like this (again, if it was my issue) :

ComponentX
|
|- componentX.component.html
|- componentX.component.ts
|- componentX.component.scss
|
|- ComponentA
|  |- componentA.component.ts
|
|- ComponentB
|  |- componentB.component.ts
|
|- ComponentC
   |- componentC.component.ts