How to dynamically create bootstrap modals as Angular2 components?

Original title: Can’t initialize dynamically appended (HTML) component in Angular 2

I’ve created a directive that appends a modal to the body on initialization. When a button (with the directive injected into it) is clicked this modal fires up. But I want the contents of this modal to be another component (In fact I want the modal to be the component). It seems that I can’t initialize the component.

Here is a plunker of what I’ve done:

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

I’m trying to make my-comp the template of my component

 '<div class="modal-body" #theBody>' 
            + '<my-comp></my-comp>' + 
 '</div>

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

update for 2.0.0 final Plunker example >= 2.0.0 @NgModule({ imports: [ BrowserModule ], declarations: [ App, ModalComponent, CompComponent], providers: [SharedService], entryComponents: [CompComponent], bootstrap: [ App, ModalComponent ] }) export class AppModule{} export class ModalComponent { @ViewChild('theBody', {read: ViewContainerRef}) theBody; cmp:ComponentRef; constructor( sharedService:SharedService, private componentFactoryResolver: ComponentFactoryResolver, injector: Injector) { sharedService.showModal.subscribe(type => { if(this.cmp) { this.cmp.destroy(); } let factory = this.componentFactoryResolver.resolveComponentFactory(type); this.cmpRef = this.theBody.createComponent(factory) $('#theModal').modal('show'); }); } close() { if(this.cmp) { this.cmp.destroy(); } this.cmp = null; } } Hint If one application change the state in SharedService or calls a method that causes an Observable to emit a value and the subscriber… Read more »