I am writing an Angular 2 unit test. I have a `@ViewChild` subcomponent that I need to recognize after the component initializes. In this case it&#39;s a `Timepicker` component from the ng2-bootstrap library, though the specifics shouldn&#39;t matter. After I `detectChanges()` the subcomponent instance is still undefined.

Pseudo-code:
```typescript
@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(&#39;timepickerChild&#39;) timepickerChild: TimepickerComponent;
    public myDate = new Date();
}
    
// Spec
describe(&#39;Example Test&#39;, () =&gt; {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture&lt;ExampleComponent&gt;;

    beforeEach(() =&gt; {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it(&#39;should recognize a timepicker&#39;. async(() =&gt; {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log(&#39;timepickerChild&#39;, timepickerChild)
    }));
});
```
The pseudo-code works as expected until you reach the console log. The `timepickerChild` is undefined. Why is this happening?

All Ng2 Bootstrap Solutions on Gang of Coders

Total of 1 Ng2 Bootstrap Solutions

Angular 2 unit testing - @ViewChild is undefined