title: Cannot read property 'show' of undefined
body: <p>I have two components, customer and customer<strong>s</strong> component. The customers components holds a list of customers and when i click on a customer, the customer component should open a modal.</p>
  
  <p><strong>customers.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, } from '@angular/core';
  
  import { CustomerComponent } from '../customer/customer.component';
  
  export class Customer {
    id: number;
    name: String;
  }
  
  const CUSTOMERS: Customer[] = [
    {
      id: 1,
      name: 'Customer one'
    },
    {
      id: 2,
      name: 'Customer two'
    }
  ];
  
  @Component({
    selector: 'app-customers',
    templateUrl: './customers.component.html',
    styleUrls: ['./customers.component.css'],
    providers: [
      CustomerComponent
    ]
  })
  export class CustomersComponent implements OnInit {
    title: String;
    customers: Customer[] = CUSTOMERS;
    customerComponent: CustomerComponent;
    // or
    @ContentChild(CustomerComponent)
    public customerComponent: CustomerComponent;
  
    constructor() {
      this.title = 'Customers';
  
      this.customerComponent = new CustomerComponent();
      // tried removing
    }
  
    ngOnInit() {
    }
  
    showCustomer(customer: Customer) {
      this.customerComponent.openModal(customer);
    }
  }
  </code></pre>
  
  <p><strong>customers.component.html</strong></p>
  
  <pre><code>&lt;app-customer&gt;&lt;/app-customer&gt;
  &lt;div id="page-wrapper"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;h1 class="page-header"&gt;{{title}}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
              De klanten pagina
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div class="table-responsive"&gt;
                &lt;table class="table table-striped table-bordered table-hover"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody *ngFor="let customer of customers;"&gt;
                  &lt;tr (click)="showCustomer(customer)" [style.cursor]="'pointer'"&gt;
                    &lt;td&gt;{{customer.id}}&lt;/td&gt;
                    &lt;td&gt;{{customer.name}}&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So after clicking on a <code>tr</code>, the CustomersComponent should show a modal.</p>
  
  <p><strong>customer.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { Customer } from '../customers/customers.component';
  import { ModalDirective } from 'ngx-bootstrap';
  
  @Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css'],
  })
  export class CustomerComponent implements OnInit {
    @ViewChild('lgModal') public lgModal: ModalDirective;
    // or
    @ViewChild(ModalDirective) public lgModal: ModalDirective;
  
    constructor() {
    }
  
    ngOnInit() {
    }
  
    openModal(customer: Customer): void {
      console.log(customer);
      console.log(this.lgModal);
  
      this.lgModal.show();
    }
  }
  </code></pre>
  
  <p>And the <strong>customer.component.html</strong></p>
  
  <pre><code>&lt;div bsModal #lgModal="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;Large modal&lt;/h4&gt;
          &lt;button type="button" class="close pull-right" (click)="lgModal.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;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>console.log(this.lgModal);</code> returns <code>undefined</code> and <code>this.lgModal.show();</code> gives an <code>ERROR TypeError: Cannot read property 'show' of undefined</code> error..</p>
  
  <p><strong>edit:</strong></p>
  
  <p>Tried to add <code>&lt;app-customer&gt;&lt;/app-customer&gt;</code> to <code>customers.component.html</code></p>