title: ngx-bootstrap BsModal closing from child component
body: <p>I have a scenario after saving data to database I need to close the <code>Bs-modal</code> popup, and my saving is done in the child component so I passed the <code>Bs-modal</code> in the child component using ()Input and using there to hide the pop up but not able to read my modal in the child component</p>
  
  <p><strong>HTML Parent Component</strong></p>
  
  <pre><code>&lt;div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
       role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title pull-left"&gt;Edit Product&lt;/h4&gt;
            &lt;button type="button" class="close pull-right" (click)="lgModal2.hide()" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
            &lt;/div&gt;
             &lt;div class="modal-body"&gt;
             &lt;app-edit-product [productId]="prodId" [modalId]="lgmodal2" #child &gt;&lt;/app-edit-product&gt;
  
             &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>Child Component TS</strong></p>
  
  <pre><code>import { BsModalRef } from 'ngx-bootstrap';
  export class EditProductComponent implements OnInit {
    @Input() modalId:BsModalRef;
    somefunction(){
      this.modalId.hide();
    }
  }
  </code></pre>
  
  <blockquote>
    <p>Error:An Unexpected error occured!TypeError: Cannot read property 'hide' of undefined</p>
  </blockquote>
  
  <p><strong>Also tried</strong></p>
  
  <pre><code>@Output() closeModal:EventEmitter&lt;Event&gt; = new EventEmitter();
  @Input() onHide:any;
  </code></pre>
  
  <p>then </p>
  
  <pre><code> somefunction(){
     this.closeModal.emit(this.onHide);
    }
  </code></pre>
  
  <p>any help will be great thanks!</p>