Angular 2: How to dynamically create ViewContainerRef

Question

I'm trying to create modal service with ability to show arbitrary modal. Currently, to create dynamic component, I'm storing placeholder for it in view:

 <div #container></div>
 ...
 @ViewChild("dialogContainer", {read: ViewContainerRef})
 dialogContainer:ViewContainerRef;

And than creating component:

let factory = this.componentResolver.resolveComponentFactory(Dialog);
this.componentReference = this.dialogContainer.createComponent(factory);

Is there way to move all this logic out of component to service, with ability to create/remove view container in body, or any other DOM element?

i need genereate container like this ````
``` and get respective id viewcontainer reference — Jagadeesh Govindaraj, Nov 14 '16 at 09:39
i need load mutiple dynamic components in mutiple dynammic containers — Jagadeesh Govindaraj, Nov 14 '16 at 09:40
Check: http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html-component-in-angular-2 — eko, Nov 16 '16 at 05:42
What do you mean by *modal service*? In the code you provided the template variable does not match the `ViewChild` parameter. I also do not see how the current title relates to the issue described in the question. — Johannes, Dec 28 '20 at 13:33

score 2 · Answer 1 · edited Nov 22 '16 at 13:15

2

It dosen't create ViewContainerRef but It helps you create dynamically a popup window as separate Component.

I created plunker example for you, and I didn't embed it here because stackowerflow code snippet dosen't support all features which I need in order to create example :) http://embed.plnkr.co/XFQAAHDAyrRAih3RTvHH/

edited Nov 22 '16 at 13:15

Kld

6,970
3
37
50

answered Nov 19 '16 at 15:51

igorzg

1,506
14
17

1

Please add the relevant code directly to the question instead of just linking a Plunker. It'f for a reason that a Plunker link on its own is prevented. – Günter Zöchbauer Nov 19 '16 at 16:05
5

I also don't see how this answers the question. – Günter Zöchbauer Nov 19 '16 at 16:07
It does solve his problem, because I had same problem. – igorzg Nov 19 '16 at 16:11
Right, didn't properly read the question. The question is actually not about "How to dynamically create ViewContainerRef". The answer still doesn't contain the relevant code parts directly. – Günter Zöchbauer Nov 19 '16 at 16:14
Right but when you look code sample from subject you can see it that he needs it for creating popup and I give him path to be able to solve his problem. – igorzg Nov 19 '16 at 16:19
And example which i provide is doing exactly that. – igorzg Nov 19 '16 at 16:21
Well, it's more convenient approach, but still uses predefined placeholder and logic inside component. – lexigren Nov 21 '16 at 09:19

Angular 2: How to dynamically create ViewContainerRef

1 Answers1