1

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>.

Matt Stone
  • 3,705
  • 4
  • 23
  • 40
StangSpree
  • 421
  • 1
  • 5
  • 22

2 Answers2

2

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.

StangSpree
  • 421
  • 1
  • 5
  • 22
0

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">...
ForestG
  • 17,538
  • 14
  • 52
  • 86
  • It is not an object. I want to pass an actual component to inner-most. It can be done using . I can do it up to one layer but I am not really sure how it happens when there is an additional layer. – StangSpree Mar 26 '18 at 14:03
  • That is component interaction with input binding. – StangSpree Mar 28 '18 at 18:45