Angular 2 ng-bootstrap Modal: How to pass data to entry component
<p>I'm trying to send data to a custom modal content component so I can call it from any other component and not repeat code. I'm new to Angular 2 and have followed the "Components as content" demo of ng-boostrap as well as the "Component Interaction" in the Angular docs and have not found a way to get this to work or an example for this case.</p>

<p>I can get the modal to open, but not with dynamic content. I've tried the <code>@Input</code> and the variable approach with no success. I've also added <code>ModalService</code> to the providers in <code>app.module.ts</code>. This is what I have with both approaches that doesn't work:</p>

<p>page.component.html:</p>

<pre><code>&lt;a (click)="modal('message')"&gt;
&lt;template ngbModalContainer&gt;&lt;my-modal [data]="data"&gt;&lt;/my-modal&gt;&lt;/template&gt;
</code></pre>

<p>page.component.ts:</p>

<pre><code>import { Component } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { ModalService } from '../helpers/modal.service'
import { ModalComponent } from '../helpers/modal.component'

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss'],
  entryComponents: [ ModalComponent ]
})

export class PageComponent {
  data = 'customData'
  constructor (
    private ngbModalService: NgbModal,
    private modalService: ModalService
   ) { }

  closeResult: string
  modal(content) {
    this.data = 'changedData'
    this.modalService.newModal(content)
    this.ngbModalService.open(ModalComponent).result.then((result) =&gt; {
      this.closeResult = `Closed with: ${result}`
    }, (reason) =&gt; {
      this.closeResult = `Dismissed ${reason}`
    });
  }
}
</code></pre>

<p>modal.service.ts:</p>

<pre><code>import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class ModalService {
  private modalSource = new Subject&lt;string&gt;()
  modal$ = this.modalSource.asObservable()
  newModal(content: string) {
    this.modalSource.next(content)
  }
}
</code></pre>

<p>modal.component.ts:</p>

<pre><code>import { Component, Input, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import { ModalService } from './modal.service'

@Component({
  selector: 'my-modal',
  template: `
    &lt;div class="modal-body"&gt;
    {{data}}
    {{content}}
    &lt;/div&gt;
  `
})

export class ModalComponent implements OnDestroy {
  @Input() data: string
  content = 'hello'

  subscription: Subscription
  constructor(
    private modalService: ModalService
  ) {
    this.subscription = modalService.modal$.subscribe(
      content =&gt; {
        this.content = content
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
</code></pre>

<p>Using angular v2.1.0, angular-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8</p>