title: Angular 2 ng-bootstrap Modal: How to pass data to entry component
body: <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>