@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

I have never used plunker. I will see if I can figure it out. — twaldron, Nov 04 '16 at 16:56
Plunker provides a ready to use Angular2 TS template under the `[ New | v ]` button. — Günter Zöchbauer, Nov 04 '16 at 16:57
Does the ng-select actually show up? Are the components registered in the module? — tylerjgarland, Nov 04 '16 at 17:13
yes the ng-select does show up. I also get the same issue when just using a div or regular select and not an ng-select — twaldron, Nov 04 '16 at 17:20
Does it make any difference to implement `AfterViewInit` with your `AppComponent`? — Erik, Nov 04 '16 at 17:27
see update. It is the ngSwitch that was causing the weirdness. — twaldron, Nov 04 '16 at 17:27
When i test ng2-select dom object return and all work.Could you reproduce in a Plunker? — Amy, Nov 04 '16 at 17:39
Possible duplicate of [Angular 2 @ViewChild annotation returns undefined](http://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined) — blo0p3r, Dec 14 '16 at 15:56

score 17 · Accepted Answer · answered Nov 04 '16 at 17:41

17

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

answered Nov 04 '16 at 17:41

Florin D

1,610
18
17

Thant makes sense I believe. I have it wrapped in the ngSwitch which shows a loading gif while the data is aquired async. When the data is done loading it is then switched and the element is shown. Ultimately I will be setting the items property of the select to the loaded data which is why i am trying to access it in the first place. – twaldron Nov 04 '16 at 19:48
This worked for me `ngAfterViewInit` and `ngOnInit` too. Thanks. – Kushal Jayswal Jun 10 '20 at 14:04

score 1 · Answer 2 · answered Apr 12 '20 at 04:37

1

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.

answered Apr 12 '20 at 04:37

Sreeram Nair

2,369
12
27

This doesn't work with model bindings unfortunately and i think your solution would improve with `[hidden]="!flag"` – Don Thomas Boyle Jun 16 '20 at 16:11

score 0 · Answer 3 · answered Jun 26 '20 at 13:01

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.

score 0 · Answer 4 · answered Jul 27 '22 at 07:35

ngSwitch was exactly the reason. (and for that case ngIf doesn't work either)

Fixed it using classes so that it still renders everything and just hides it.

CSS

.show{
  display: block !important;
}

.hide{
  display: none;
}

HTML

 <div [ngClass]="{'show': someVariable === 'someVariable'}" class="hide">
   <input type="text" #search />
 </div>

Edit: the answer of @Sreeram Nair also works, even a bit more elegant.

@ViewChild always returns undefined

4 Answers4

Linked