How to define place where dynamic components would be injected?

Question

My components injected dynamical. But how to define place where they would be without any wrapping?

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

  constructor(
    private apiService: ApiService,
    private viewContainerRef: ViewContainerRef,
    private componentResolver: ComponentResolver) {
  }

  create() {
    this.componentResolver.resolveComponent(PieChart).then((factory) => {
      this.viewContainerRef.createComponent(factory);
    });
  }

And i want to inject them in some DIV.

<div class="someClass"> 
<!--How inject them here?  -->
</div>

I don't really understand your question but it sounds similar to what I demonstrate in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 — Günter Zöchbauer, Jul 19 '16 at 12:54
But how to define place, where would be new components?? Something like for routing. — John Doe, Jul 19 '16 at 13:06
In the linked answer the component is added inside the the `` element. — Günter Zöchbauer, Jul 19 '16 at 13:08

score 2 · Accepted Answer · answered Jul 19 '16 at 13:12

2

There are two ways:

injecting the ViewContainerRef like in your question, then new components are added below this component
using a target element in your components template with a template variable like <div #target></div> and @ViewChild('target', {read: ViewContainerRef}) viewContainerRef:ViewContainerRef; to get the ViewContainerRef of this <div>. Added elements are again added below this <div>

createComponent() allows to pass an index. By default new components are always added at the end, but if you pass an index it is inserted at this position.
(not tested) with index 0 you should be able to add the new element before the target element.
If you add more than one component to the same ViewContainerRef you can pass an index to insert the new component before the elements added earlier.

answered Jul 19 '16 at 13:12

Günter Zöchbauer

623,577
216
2,003
1,567

How should look like my create function with this code: @ViewChild('target', {read: ViewContainerRef}) viewContainerRef:ViewContainerRef ? – John Doe Jul 20 '16 at 07:12
Not sure what you mean. The function like you have it in your question should work. – Günter Zöchbauer Jul 20 '16 at 07:23
Thanks a lot! You really helped me. – John Doe Jul 20 '16 at 07:44

score 0 · Answer 2 · answered Oct 01 '16 at 17:39

In finale release, ComponentResolver is deprecated. Instead, We can use Compiler API to create ComponentFactory.

But how we can do this now?

I found this article http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/ but compiler does not have method compileComponentAsync.

How to define place where dynamic components would be injected?

2 Answers2