Angular 2 Modal Service insert dynamic (unknown) component

Question

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

saurabh · Accepted Answer · 2017-08-24 15:53:25Z

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:

https://angular.io/guide/dynamic-component-loader

edited Aug 24, 2017 at 15:53

saurabh

6,7957 gold badges45 silver badges64 bronze badges

answered May 16, 2016 at 17:45

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simeon Grigorovich Over a year ago

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 Over a year ago

I just figured out what you could pass a type of component as input. Thank you for inspiration!:)

Collectives™ on Stack Overflow

Angular 2 Modal Service insert dynamic (unknown) component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related