CODEWITHSUNDEEP
javascriptangularangular-components
ewulff
ewulff

Reputation: 2269

Angular 6 - Best way to implement complex template

I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.

Component basic atructure

So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.

For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.

If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.

Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.

Upvotes: 0

Views: 128

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86800

In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -

<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>

Upvotes: 1

Related Questions