Angular component template inheritance-CodePudding

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 ><img >...</div>

But how do i get something on the three dots?

How does this nest?

I want the result to look like this:

<div ><img ><imageComp></imageComp></div>

CodePudding user response：

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 ><img ><ng-content></ng-content></div>

And your child component would look something like:

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