title: Angular 2 passing data from parent component to dynamic modal
body: <p>I used this example:
  <a href="https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components">How to dynamically create bootstrap modals as Angular2 components?</a><br>
  to develop my own plunk with dynamic generation of different or the same modals shared between more components.<br>
  Unfortunately I have some difficulties because I don't know how to pass data from parent component to the modals.
  In my plunk (<a href="https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview</a>), the data to pass is called "dataToPass".
  Any ideas?</p>
  
  <p>Here below my app.ts:</p>
  
  <pre><code>//our root app component
  import {
    NgModule, 
    ComponentRef, 
    Injectable, 
    Component, 
    Injector, 
    ViewContainerRef, 
    ViewChild, ComponentFactoryResolver} from "@angular/core";
  import {BrowserModule} from '@angular/platform-browser'
  import {Subject} from 'rxjs/Subject';
  
  @Injectable()
  export class SharedService {
    showModal:Subject&lt;any&gt; = new Subject();
  }
  
  @Component({
    selector: 'comp-comp',
    template: `MyComponent`
  })
  export class CompComponent { }
  
  @Component({
    selector: 'child-component',
    template: `
        &lt;button (click)="showDialog()"&gt;show modal from child&lt;/button&gt;
    `,
  })
  export class ChildComponent {
    constructor(private sharedService:SharedService) {}
  
    showDialog() {
      this.sharedService.showModal.next(CompComponent);
    }
  
  }
  
  @Component({
    selector: 'modal-comp',
    template: `
    &lt;div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel"&gt;
      &lt;div class="modal-dialog largeWidth" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title" id="theModalLabel"&gt;The Label&lt;/h4&gt;&lt;/div&gt;
          &lt;div class="modal-body" #theBody&gt;
        &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()"&gt;Close&lt;/button&gt;
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  `
  })
  export class ModalComponent {
    @ViewChild('theBody', {read: ViewContainerRef}) theBody;
  
    cmp:ComponentRef;
  
    constructor(
      sharedService:SharedService, 
      private componentFactoryResolver: ComponentFactoryResolver, 
      injector: Injector) {
  
      sharedService.showModal.subscribe(type =&gt; {
        if(this.cmpRef) {
          this.cmpRef.destroy();
        }
        let factory = this.componentFactoryResolver.resolveComponentFactory(type);
        this.cmpRef = this.theBody.createComponent(factory);
        $('#theModal').modal('show');
      });
    }
  
    close() {
      if(this.cmpRef) {
        this.cmpRef.destroy();
      }
      this.cmpRef = null;
    }
  }
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello&lt;/h2&gt;
        &lt;button (click)="showDialog()"&gt;show modal&lt;/button&gt;
        &lt;child-component&gt;&lt;/child-component&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
  
    private dataToPass: string;
    constructor(private sharedService:SharedService) {
      this.dataToPass = 'data to pass';
    }
  
    showDialog() {
      this.sharedService.showModal.next(CompComponent);
    }
  
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App, ModalComponent, CompComponent, ChildComponent],
    providers: [SharedService],
    entryComponents: [CompComponent],
    bootstrap: [ App, ModalComponent ]
  })
  export class AppModule{}
  </code></pre>
  
  <p>Thanks a lot in advance.</p>