Finding Viewchild component undefined

[Namita]

I created ViewChild of Grid component. But finding undefined on link click event.

I found this issue many times. Please suggest what to do

[Sujith Kumar Rajkumar]

Hi Namita, 

 

Greetings from Syncfusion support. 

 

When ViewChild is defined for a Grid or any other component it will be stored at the instance where it is defined(In most cases this will be the angular application’s root instance). So for example consider an anchor tag with click event defined inside the Grid template like demonstrated below, 

 

<e-column headerText='Employee Image' width='150' textAlign='Center'> 

    <ng-template #template let-data> 

        <div> 

            <a rel='nofollow' href=" https://en.wikipedia.org/wiki/{{data.Country}}" target="_blank" (click)="linkClick($event)">{{data.Country}}</a> 

        </div> 

    </ng-template> 

</e-column> 

 

Now since root instance will be accessible in the anchor tag’s click event you will be able to access the Grid’s instance initialized in the ViewChild here, 

 

  

 

Sample for your reference, 

 

Sample: https://stackblitz.com/edit/angular-dnxvfp?file=app.component.ts 

 

So your reported problem might occur due to one of the following reasons, 

• If the component is not properly initialized in the View Child or if it is not yet rendered completely while accessing.
• If the current instance at the link click event is not the instance where the View Child is present.

 

This is a common problem so please ensure the above cases in your application and check the below stack overflow links for more details on this problem, 

 

Links: https://stackoverflow.com/questions/45953620/angular-2-cannot-get-base-class-instance-with-viewchild-nor-contentchild 

           https://stackoverflow.com/questions/48321568/viewchild-returns-undefined 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R