0

Is there any way in Angular 2 RC5 to retrieve the HTML from a component to then insert into the innerHTML of another?

I am using a proprietary library that requires creating modal dialogs through an API that takes the "content" HTML:

create({ctrl: 'popup', options: {contents: INNERHTML, ...}})

I can create the Angular 2 component for the popup contents using regular Angular 2 Typescript, but how do I extract that component's HTML to "inject" into the INNERHTML of the create API?

  • Do I need to use the Angular 2 Compiler class in @angular/core?
  • Do I need to use a @ViewChild and if so, how?

I found these SOF questions that seem to deal with this problem, but they are for older versions of Angular 2 and do not work any more:

Community
  • 1
  • 1
Ralph
  • 31,584
  • 38
  • 145
  • 282
  • It's not clear to me what exactly you want. Why don't you just insert a new component instance into the dialog instead reading the HTML from another component? Do you want the HTML to evaluate bindings and component/directive instantiation, or is is plain HTML? – Günter Zöchbauer Aug 25 '16 at 04:49
  • I want the component to be a fully functional Angular component that supports binding, etc. How do I "insert a new component instance into the dialog", when the dialog API requires HTML? – Ralph Aug 25 '16 at 09:59
  • That won't work. You can't pass around HTML with bindings. Angular processes bindings and then adds the result to the DOM and updates the DOM when binding expressions change. What's added to the DOM doesn't itself contain bindings at all. – Günter Zöchbauer Aug 25 '16 at 10:02
  • Given a DOM element, is there any built-in JavaScript function to attach a new element as a child? I can probably just provide the dialog API with a dummy value for "content", then use jQuery to replace that dummy content with a new DOM element that is really the Angular component body. The only JS function I can find is `innerHTML`. – Ralph Aug 25 '16 at 10:07
  • It seems `ViewContainerRef.createComponent()` got CSS selector support recently but where I saw this mentioned it was about how to make this work and I haven't seen an answer yet. – Günter Zöchbauer Aug 25 '16 at 10:13
  • 1
    I suspected that it might involve `ViewContainerRef`, but the documentation on `angular.io` lags behind the code changes. – Ralph Aug 25 '16 at 10:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121849/discussion-between-ralph-and-gunter-zochbauer). – Ralph Aug 25 '16 at 14:29

0 Answers0