ViewContainerRef.createComponent() renders component after container

Question

I have a component template:

<div #wrapper></div>

In my .ts code I have:

@ViewChild("wrapper", {read: ViewContainerRef}) wrapper:ViewContainerRef;
.
.
.
ngAfterViewInit() {
  this.wrapper.createComponent(SomeComponent);
}

I want to make an instance of SomeComponent and add it to #wrapper div.

All works as expected except for SomeComponent is being rendered after <div #wrapper></div> and not as its child (which I would expect).

What am I missing? How to render SomeComponent within div?

This is the expected behaviour, there's no "clean" way to do what you want but you can try this : How to dynamically create component inside child component in Angular? — Tibère B.
– Tibère B., Commented May 5, 2024 at 20:18
@TibèreB. yes, that's what I ended up doing: getting a reference of adiv element and apending a components element as a child (but using renderer). — tlt
– tlt, Commented May 5, 2024 at 20:42
can't you use <ng-container #placeToRender> inside a div as a place to render? — Andrei
– Andrei, Commented May 5, 2024 at 23:12
@Andrei Perhaps. How would I do that? In particular, how would I get the reference to it from the code and how would I apply component to it dynamically? — tlt
– tlt, Commented May 6, 2024 at 4:22
Andrei's solution is to add an ng-container element isinde of the div where you want to create the component, the template from your example would become : <div><ng-container #wrapper></ng-container></div> — Tibère B.
– Tibère B., Commented May 6, 2024 at 10:34

MegaMatt · Accepted Answer · 2025-03-27 20:20:01Z

1

Create a directive that's nothing but a ViewContainerRef, then use it with an ng-template in your actual component's template.

Directive:

@Directive({
    selector: '[someComponentHost]',
    standalone: true
})
export class SomeComponentHostDirective {
    constructor (public viewContainerRef: ViewContainerRef) {}
}

Your component template:

<div class="wrapper">
   <ng-template someComponentHost></ng-template>
</div>

Your component:

@ViewChild(SomeComponentHostDirective) host!: SomeComponentHostDirective;

const viewContainerRef = this.host.viewContainerRef;
viewContainerRef.createComponent(SomeComponent);

So you're using a view container, on an ng-template that won't render, inside the div you actually want to wrap your component.

answered Mar 27 at 20:20

MegaMatt

23.9k39 gold badges116 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamid Taebi · Accepted Answer · 2025-09-15 13:42:34Z

0

for angular 17 and higher:

<div>
  <ng-container #wrapper></ng-container>
</div>

and in ts file:

  import {ViewContainerRef, viewChildren} from '@angular/core';

  public wrapper= viewChildren('wrapper', { read: ViewContainerRef });

  ngAfterViewInit() {
    this.wrapper.createComponent(SomeComponent);
  }

answered Sep 15 at 13:42

Hamid Taebi

4073 silver badges13 bronze badges

Collectives™ on Stack Overflow

ViewContainerRef.createComponent() renders component after container

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related