title: Pass data into ngbmodal instance in angular 2/4 from the parent component
body: <p>I am not aware if this is even possible in Angular 2/4. I have a Modal Component which in turn has a Modal Content Component.  I also have a service which allows to open/close the modal instance. I am using ngbModal. </p>
  
  <p>The modal Content template needs to show/hide some fields based on the boolean parameter. </p>
  
  <p>My Page component has a button  which on click  needs to open the modalInstance with the boolean parameter.</p>
  
  <p>Here is what i have, </p>
  
  <p><strong>page.component.html</strong></p>
  
  <pre><code> &lt;div class="bar-sec"&gt;
     &lt;action-bar [options]="btnOpts" (select) = 
        "actionBarSelectHandler($event)"&gt;
     &lt;/action-bar&gt;
  &lt;/div&gt;
  &lt;div class="grid-sec"&gt;
  &lt;/div&gt;
   **&lt;app-ad-search [userOnly]='userOnly'&gt;&lt;/app-ad-search&gt;**
  </code></pre>
  
  <p><strong>page.component.ts</strong></p>
  
  <pre><code> import {Component, ViewChild} from '@angular/core';
   import { NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
   import { SearchModalComponent} from '../../X/search-modal.component';
   import { SearchContentComponent} from '../../X/search-content.component';
   import { XModalService} from '../../X/x-modal.service';
  
  @Component ({
    selector: 'page-test',
    templateUrl: './page.component.html',
    providers: [XModalService]
  })
  
   export class VCenterMachinesComponent {
     XModalService: XModalService;
     filterText: String = '';
     machines: any[];
     btnOpts: {};
     **userOnly:boolean = true;**
  
    **@ViewChild(SearchModalComponent) private 
         SearchModalComponent:SearchModalComponent;**
  
   constructor(E:XModalService) {
    this.XModalService = E;
    **this.userOnly = true;**
   }
  
   actionBarSelectHandler(data) {
      if (data.item.id === 'assignuser') {
          **this.XModalService.openSearchModal()**.then(() =&gt; {
              console.log('close');
          }, () =&gt; {
              console.log('dismiss');
          });
       }
    }
  
   ngOnInit() {
      this.machines = [];
     this.filterText = '';
     this.btnOpts = {
       data: [{
                  id: "assignuser",
                  label: "Assign User...",
                  enabled: true
              }]
     };
  
    }
   }
  </code></pre>
  
  <p><strong>search-modal.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit, OnDestroy, Input } from '@angular/core';
      import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  
      import { SearchContentComponent } from './search-content.component';
  
          @Component({
              selector: 'app-ad-search',
              template: `
                  &lt;modal-header (onClose)="activeModal.dismiss();"&gt;
                      &lt;span&gt;{{modalTitle}}&lt;/span&gt;
                  &lt;/atk-modal-header&gt;
                  &lt;modal-body&gt;
                      &lt;search-content&gt;
                      &lt;/search-content&gt;
                  &lt;/modal-body&gt;
                  &lt;modal-footer [buttons] = "modalBtns" 
        (onClick)="btnClick($event)"&gt;
                  &lt;/modal-footer&gt;
              `
          })
          export class SearchModalComponent{
              @Input()
              private modalBtns: any[] | any = [{
                  id: 'ok',
                  label: 'OK',
                  primary: true,
                  disabled: true
              }, {
                  id: 'cancel',
                  label: 'Cancel',
                  primary: true,
                  disabled: false
              }];
              @Input()
              **public userOnly:boolean = false;**
  
              @Input()
              public modalTitle: string = (this.userOnly) ? 'XXX':'YYY';
  
  
              constructor(private activeModal: NgbActiveModal) { }
  
              btnClick(btn) {
                  if (btn.id === 'ok') {
                      this.activeModal.close(this.selectedRows);
                  } else {
                      this.activeModal.dismiss();
                  }
              }
  
  
          }
  </code></pre>
  
  <p><strong>search-content.component.ts</strong></p>
  
  <pre><code>  import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from 
      '@angular/core';
              @Component({
                selector: 'ad-search-content',
                template: '&lt;div class="form-group row" *ngIf="!userOnly"&gt;
                      &lt;label class="col-sm-4 col-form-label"&gt;Type:&lt;/label&gt;
                      &lt;div class="col-sm-8"&gt;
                          &lt;label class="custom-control custom-checkbox"&gt;
                              &lt;input type="checkbox" class="custom-control-
         input" [(ngModel)]="filters.type.users" name="usersType"&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label class="col-sm-4 col-form-label"&gt;Domian:&lt;/label&gt;      
                  &lt;/div&gt;'
              })
              export class SearchContentComponent implements OnInit, OnDestroy 
          {
  
                  constructor() { }
  
                  ngOnInit() {}
                  ngOnDestroy() {}
  
              }
  </code></pre>
  
  <p>x-modal.service.ts</p>
  
  <pre><code>        import { Injectable } from '@angular/core';
          import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  
          import { SearchModalComponent } from './search-modal.component';
  
  
          @Injectable()
          export class XModalService {
              constructor(private modalService: NgbModal) {}
  
              **openSearchModal() {**
                  return this.modalService.open(SearchModalComponent, 
            {backdrop: 'static'}).result;
              }
          }
  </code></pre>
  
  <p>Here I tried using the opensearchModal() method from the Xmodalservice to open the modal instance with the boolean value set to true in the typescript file. But i dont even see the page . It complains No provider for NgBActiveModal!</p>
  
  <p>Please let me know as to how could i pass teh boolean to the modal instance that i open?</p>