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
  • 521
  • 1
  • 4
  • 23

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,543
  • 7
  • 40
  • 60
Thierry Templier
  • 191,422
  • 38
  • 386
  • 349
  • 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