@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 t

Answer 1

In my case, I encountered the same problem. I console.log()-ed the content that is retrieved from the child component and it gives me 'undefined'.

And I solved it by merely refreshing the page. ctrl+shift+R may help. I guess it's because the cache of the browser that leads to this problem.

Answer 2

@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)
        }
    })
 }

Answer 3

I replaced all occurrences of

*ngIf="flag"

with

[style.display]="flag ? 'block' : 'none'"

to get this to work consistently in my case. Otherwise the ViewChild components that didn't exist when my view first loaded would potentially remain undefined for ever.