ViewContainerRef.createComponent inside a structural directive adds the component as a SIBLING of the element the directive is called on

Description

I have a requirement of creating a structural directive that creates a child component inside inside the element where the directive is being called. If I use ViewConainerRef.createComponent component is injected as a SIBLING of the element where the directive is called. i.e:

If I write a directive called *fooDirective, Like this and want to inject <foo-component>:

<div *fooDirective></div>

Here is what it currently outputs:

<div></div>
<foo-component></foo-component>

And what I was expecting was this:

// what I was expecting
<div>
    <foo-component></foo-component>
</div>

I know I’ve found some issues that indicate ViewContainerRef.createComponent injects new components as siblings by design, but I want to know for my specific instance it works this way by design as well. If it does is there a workaround we can do to get by?

Some clarification would go a very long way as I feel it kind-of is not well documented explicitly.

Thanks.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-insert-component-in-structural-directive?file=app%2Fapp.component.ts

[trotyl]

Duplicate of https://github.com/angular/angular/issues/8817, https://github.com/angular/angular/issues/29448

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}