CODEWITHSUNDEEP
angulartypescriptangular2-ngcontent
StangSpree
StangSpree

Reputation: 439

Angular transclusion when using multiple components

I have three components of following hierarchy: 

<parent-component>
 <wrapper-layer>
   <inner-most>
   </inner-most>
 </wrapper-layer>
</parent-component>

Im confused on how to pass a component from <parent-component> to <inner-most> component Via <wrapper-layer>.

During the transclusion how do I avoid the passed component to be displayed in the <wrapper-layer>.

Upvotes: 1

Views: 713

Answers (2)

StangSpree
StangSpree

Reputation: 439

Since there are no answers. This is how I got it done:

In <parent-component>: Place the component you wish to pass.

In <wrapper-layer>: Use the following snippet: 

<ng-container ngProjectAs="component-to-pass">
            <ng-content select="component-to-pass"></ng-content>
</ng-container>

In <inner-most>: <ng-content select="component-to-pass"></ng-content>.

By doing this way, the passed component does not get rendered in the middle layer but instead gets passed into the <inner-most> component.

Upvotes: 2

ForestG
ForestG

Reputation: 18105

If you want to pass a component to it's children, then you can use something like this:

in parent-component html:

<wrapper-layer [parent]="this">...

(this will pass the current component to it's children. Or, if you want to find a custom component, still can use a ViewChild selector )

in wrapper-layer ts:

@Input() parent: any;

and you just pass it again, in wrapper-layer html:

<inner-most [parent]="parent">...

Upvotes: 0

Related Questions