Adding component dynamically ViewContainerRef is undefined

Question

In Parent Component.ts

  @ViewChild('dynamic', {
    read: ViewContainerRef
  }) viewContainerRef: ViewContainerRef;

In HTML code

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content" [innerHTML]="item.value | safeHtml">
    </div>
  </div>
</div>
<ng-template #dynamic></ng-template>

This work fine but when nested inside dive

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content" [innerHTML]="item.value | safeHtml">
       <ng-template #dynamic></ng-template>
    </div>
  </div>
</div>

viewContainerRef is undefined?

Component.ts

@Component({
 ....
})
export class TestComponent implements OnInit, AfterViewInit {

  @ViewChild('dynamic', {
    read: ViewContainerRef
  }) viewContainerRef: ViewContainerRef;

  constructor(@Inject(Service) private service) {
  }

  ngAfterViewInit() {
    this.service.setRootViewContainerRef(this.viewContainerRef);
    this.service.addDynamicComponent();
  }
}

and service.ts

@Injectable()
export class Service {
    factoryResolver: any;
    rootViewContainer: any;
    constructor(
        @Inject(ComponentFactoryResolver)
        factoryResolver) {
        this.factoryResolver = factoryResolver;
    }
    setRootViewContainerRef(viewContainerRef) {
        this.rootViewContainer = viewContainerRef;
    }
    addDynamicComponent() {
        const factory = this.factoryResolver
            .resolveComponentFactory(JobDashComponent);
        const component = factory
            .create(this.rootViewContainer.parentInjector);
        this.rootViewContainer.insert(component.hostView);
    }
}

It depends on where you are trying to access the viewContainerRef. — joka00
– joka00, Commented Mar 14, 2019 at 12:16

joka00 · Accepted Answer · 2019-03-14 13:23:01Z

2

The viewContainerRef is undefined because you overwrite it with the [innerHTML] on it's parent tag

Instead of [innerHTML] you can use this

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="content">
       {{item.value | safeHtml}}
       <ng-template #dynamic></ng-template>
    </div>
  </div>
</div>

Select more elements with same #id:

If you want to select every element with a specific #id then you can use QueryList.

The syntax would look like this

@ViewChildren('dynamic') viewContainerRefList: QueryList<ViewContainerRef>;

Then you can then work with it like with normal array if you apply .toArray() on it.

const array = viewContainerRefList.toArray();

edited Mar 14, 2019 at 13:23

answered Mar 14, 2019 at 12:43

joka00

2,5771 gold badge12 silver badges29 bronze badges

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

3 Comments

Walter White Over a year ago

for example ngFor iterate over by Array length = 3 but only first element contains ng-template. Why this content is not added to all elements from array?

joka00 Over a year ago

You mean why only the first ng-template is accessed by @ViewChild()?

Walter White Over a year ago

I thought about it

Collectives™ on Stack Overflow

Adding component dynamically ViewContainerRef is undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related