parent component accesses one of its child via ViewChild but it is always undefined

Question

I have a component with another one of my own components in its template:

<div (click)="onEditStarted()">
    ...
    <my-child *ngIf="someCondition"></my-child>
    ...
</div>

And in the parent I have:

@ViewChild(MyChildComponent) child: MyChildComponent;

But where I need child , it is undefined .

OnEditStarted() {
    ...
    setTimeout(() => this.child.someMethod(), 0);
   ...
}

I also tried to negate the someCondition and put it into the [hidden] property instead of *ngIf but it is still undefined . Any ideas?

Answer 1

I think the problem is in The *ngIf directive. It's killing the my-child component so it couldn't reference it. You can try using ViewChildren instead of ViewChild or try to wrap the ngIf using a ng-template