Angular component template inheritance

Question

Situation is as follows:

I have a outer component, and have other components inside that. Lets say i created a baseComponent that has a border and a close button. Inside that i want to show stuff. This can be a lot of components, but they all need to have a border and a close button.

So i thought something like this first:

<baseComp><imageComp></imageComp></baseComp>
<baseComp><textComp></textComp></baseComp>

The baseComponent should handle the border and the close button.

But the template of the baseComponent looks like this:

<div class="border"><img class="closebutton">...</div>

But how do i get something on the three dots?

How does this nest?

I want the result to look like this:

<div class="border"><img class="closebutton"><imageComp></imageComp></div>

pthor · Accepted Answer · 2022-12-08 17:13:05Z

1

Take a look at content projection. Using <ng-content></ng-content>, you can project your inner component (<imageComp></imageComp>) into the template of your parent component. Your parent component would look something like:

<div class="border"><img class="closebutton"><ng-content></ng-content></div>

And your child component would look something like:

<baseComp>
   <!-- Contents of ImageComp -->
</baseComp>

answered Dec 8, 2022 at 17:13

pthor

6235 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular component template inheritance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related