4

I am trying to dynamically insert a component into custom modal window component

my modal component receives a URL to a html file with a component inside:

<a modal bodyUrl="/some/path/body.html">

body.html:

  <hello-component></hello-component>

I am loading body.html's content into the modal's DOM via http and inserting it into the template via htmlBinding attribute.

However, my component won't render. Is there a way to force to re-rendering? Or something like that?

Thank you for your help!

Update 1:

Both answers below gave me an idea to pass a component type as an Input of a modal and use DynamicComponentLoader to bootstrap a component

Here is plunk with concept:

http://plnkr.co/edit/kbD8wVgTr0b0J4rvk4uY?p=preview

Simeon Grigorovich
  • 551
  • 1
  • 4
  • 24

1 Answers1

2

You need to use the DynamicComponentLoader instead of the innerHTML property. In this case, the component will be compiled and added into the template.

Here is a sample:

@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}

See this link for more details:

saurabh
  • 6,687
  • 7
  • 42
  • 63
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Thank for the answer! The problem is what I cannot know the type of the component I am passing to the modal window. Is it possible to dynamically load a component by it's name as string? What would happen if my body's content would have multiple components inside? – Simeon Grigorovich May 17 '16 at 08:30
  • I just figured out what you could pass a type of component as input. Thank you for inspiration!:) – Simeon Grigorovich May 17 '16 at 09:15