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

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

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

3. @ViewChild('myComp', {static:true}) child: ElementRef;

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

Answer 1

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)