CODEWITHSUNDEEP
htmlangulartemplates
BasieP
BasieP

Reputation: 59

Angular component template inheritance

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>

Upvotes: 0

Views: 196

Answers (1)

pthor
pthor

Reputation: 623

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>

Upvotes: 1

Related Questions