@ViewChild returns undefined Angular 8

Question

For some reason my @ViewChild in my Angular 8 App does not work "undefined". I have defined it like this in html file:

<div class="container">
    <div class="row h-100">
      <kendo-splitter orientation="vertical">
        <kendo-splitter-pane>
          <kendo-splitter>
        <kendo-splitter-pane>
            ...
        </kendo-splitter-pane>
        <kendo-splitter-pane>
            <div>
                <myComponent #myComp ....> </<myComponent> // ViewChild id here
            </div>
        </kendo-splitter-pane>
    </kendo-splitter>
        </kendo-splitter-pane>
      </kendo-splitter>

in ts file I tried the following and all return undefined:

@ViewChild(myComponent, { static: true }) child: myComponent;
@ViewChild('myComp', { static: false }) child: myComponent;
@ViewChild('myComp', {static:true}) child: ElementRef;

and I used ngAfterViewInit but still get undefined. Is it because myCompnent is wrapped by many html elements?

@ViewChild(myComponent, { static: true }) child: myComponent; this should ideally work, do you have a stackblitz link to demonstrate the issue? — Nidhin Joseph
Can you please retrieve the value in the ngOnInit() function in your myComponent component? — Aman Gojariya
I'm know that sound as joke, but be sure the element is in the DOM (imagine you're using *ngIf in some condition) when you try to access it — Eliseo

michelepatrassi michelepatrassi · Accepted Answer · 2019-11-30T09:36:56

Try

@ViewChild('myComp', { static: false }) child: myComponent;

Or if you are using

@ViewChild(myComponent, { static: true }) child: myComponent;

Make sure that myComponent is the component class name and not the selector (just to be clear because I cannot confirm it from the example code)

@ViewChild returns undefined Angular 8

1 Answers