@ViewChild always returns undefined
@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)
}
})
}
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.