title: Angular 2 unit testing - @ViewChild is undefined
body: <p>I am writing an Angular 2 unit test. I have a <code>@ViewChild</code> subcomponent that I need to recognize after the component initializes. In this case it's a <code>Timepicker</code> component from the ng2-bootstrap library, though the specifics shouldn't matter. After I <code>detectChanges()</code> the subcomponent instance is still undefined.</p>
  <p>Pseudo-code:</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
      template: `
          &lt;form&gt;
              &lt;timepicker
                  #timepickerChild
                  [(ngModel)]=&quot;myDate&quot;&gt;
              &lt;/timepicker&gt;
          &lt;/form&gt;
      `
  })
  export class ExampleComponent implements OnInit {
      @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
      public myDate = new Date();
  }
      
  // Spec
  describe('Example Test', () =&gt; {
      let exampleComponent: ExampleComponent;
      let fixture: ComponentFixture&lt;ExampleComponent&gt;;
  
      beforeEach(() =&gt; {
          TestBed.configureTestingModel({
              // ... whatever needs to be configured
          });
          fixture = TestBed.createComponent(ExampleComponent);
      });
  
      it('should recognize a timepicker'. async(() =&gt; {
          fixture.detectChanges();
          const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
          console.log('timepickerChild', timepickerChild)
      }));
  });
  </code></pre>
  <p>The pseudo-code works as expected until you reach the console log. The <code>timepickerChild</code> is undefined. Why is this happening?</p>