Angular 2 modals shared between components
<p>I have a typical Angular 2 app with many components.<br>
I installed this modal component: <a href="https://github.com/pleerock/ng2-modal" rel="nofollow noreferrer">https://github.com/pleerock/ng2-modal</a>.<br>
Is there a way to share the same modals between more components? 
I explain better. I would like the same modal should open on click of different buttons inside different components. Is it possible?  </p>

<p>I tried this kind of approach
<a href="https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview</a>
but it's not the right way, because it always adds content to the modal.</p>

<p>I post it here below my app.ts file:</p>

<p><strong>21/12/2016 update</strong><br>
Following @echonax suggestion, I updated my plunk:</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: '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: 'comp-comp',
  template: `MyComponent`
})
export class 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&lt;any&gt;;
  cmpRef:ComponentRef&lt;any&gt;;

  constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) {

    sharedService.showModal.subscribe(type =&gt; {
      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;
  }
}

@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 {
  constructor(private sharedService:SharedService) {}

  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>Stay tuned!</p>