@ViewChild always returns undefined

Question

I know this has been asked before, but none of the selected answers are working for me.

I am trying to use @ViewChild to get my ng-select from the dom. And it always returns undefined.

here is the select inside the main.html:

<ng-select id = "user-select" 
     #userSelect 
     [allowClear]="true"
     [items]="singleSignOnUsers"
     [disabled]="disabled"
     placeholder="No user selected">
</ng-select>

here is my component

import { Component, AfterViewInit, ViewChild  } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-main',
    templateUrl: '../app/main.html',
    providers: [ApiHttpService, UserAdministrationService]
})

export class AppComponent {
    @ViewChild('userSelect') userSelect;


    ngAfterViewInit() {
        alert(this.userSelect);
    }
}

what am i missing here?

Update: Oh My Soul! I figured out why this wasn't working when it should.

I have the whole view wrapped in a div with an ngSwitch. If I move it out I can access them.

Now I don't know how to access them while in the ngSwitch however. But I don't have to use the ngSwitch.

<div [ngSwitch]='loading'>
        <div *ngSwitchCase="false">
            ...
            <ng-select id="user-select"
                       #userSelect
                       [allowClear]="true"
                       [items]="singleSignOnUsers"
                       [disabled]="disabled"
                       placeholder="No city selected">
            </ng-select>
            ...
        </div>
    <div

Answer 1

@twaldron Are you using some delayed data loading in ngOnInit?

Because in that case, in my experience, reading a @ViewChild as a ElementRef produces no results

If your component has the data already resolved (like the case when a parent passes a child data object to a sub component) it should work (at least for me it did).

In the case of asynchronous data loading, the way I was able to make it work is using a change notification

 @ViewChildren('userSelect') userSelect: QueryList<ElementRef>;

 ngAfterViewInit(): void {
    this.userSelect.changes.subscribe(item => {
        if (this.userSelect.length) {
            alert(this.userSelect.first.nativeElment.outerHTML)
        }
    })
 }