Can't get an instance of component which has placed inside ng-template?

I have used mycomponent inside ng-temmplate then i tried to take an instance of my component but it returns undefined

I have tried like below:

Sample - https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-hrguvv?file=app.component.ts

Html:

<div class="control-section">
	<ejs-grid #grid [dataSource]='empData' (detailDataBound)="detailsDataBound($event)" id='Grid'>
		<ng-template #detailTemplate let-data>
			<ng-container *ngTemplateOutlet="check"></ng-container>
		</ng-template>
		<e-columns>
			<e-column field="id" headerText="നമ്പർ" width="6%"></e-column>
			<e-column field="slNo" headerText="നമ്പർ" width="6%"></e-column>
		</e-columns>
	</ejs-grid>
</div>

<ng-template #check>
	<ejs-grid #childComponent allowPaging='true' (load)='load($event)' [pageSettings]='pageSettings'>
		<e-columns>
			<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
			<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'>
			</e-column>
			<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
			<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'>
			</e-column>
			<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
		</e-columns>
	</ejs-grid>
</ng-template>

App.component.ts:

export class AppComponent {

  // Tried like below but no luck
    @ViewChild('childComponent', {static: false})
    private compInsideTemplate: GridComponent;

    @ViewChild('grid', {static: true})
    public grid: GridComponent;
    public data: object[];
    public datas: object[];
    public args: any;

    public getdata(args: any): object[] {
      return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
    }
    ngOnInit(): void {
        this.data = hierarchyOrderdata;
        this.datas = data;
      
    }
    ngAfterViewInit() {
    debugger;
    console.log(this.compInsideTemplate);
  }
  
 }

But ihave tried like below it works but i am not able take mycomponent instance exactly

Sample - https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-w9aqmh?file=app.component.ts

app.component.ts:

export class AppComponent {


    @ViewChild('check', {static: false})
    private detailgrid: TemplateRef<any>;

    @ViewChildren('check') detailgrid1: QueryList<any>;

    @ViewChild('grid', {static: true})
    public grid: GridComponent;
    public data: object[];
    public datas: object[];
    public args: any;

    public getdata(args: any): object[] {
      return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
    }
    ngOnInit(): void {
        this.data = hierarchyOrderdata;
        this.datas = data;
      
    }
    ngAfterViewInit() {
    debugger;
    console.log(this.detailgrid);
    console.log(this.detailgrid1);
  }
 }

is this not possible to take component instance when it is placed inside ng-template?

[Airblader]

You cannot query it in the AfterViewInit hook of the parent component because at that time the check template hasn’t been instantiated yet. You need to wait for that to happen, and that timing depends entirely on ejs-grid. Angular cannot know when they component decides to instantiate the template passed to it.

[kumaresan-subramani]

@pkozlowski-opensource , sorry for that. please refer below sample

https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-1gboau?file=app.component.ts

I want to take instance of component [childComponent ] which has paced inside ng-template

<div class="control-section">
	<ejs-grid #grid [dataSource]='empData' (detailDataBound)="detailsDataBound($event)" id='Grid'>
		<ng-template #detailTemplate let-data>
			<ng-container *ngTemplateOutlet="check"></ng-container>
		</ng-template>
		<e-columns>
			<e-column field="id" headerText="നമ്പർ" width="6%"></e-column>
			<e-column field="slNo" headerText="നമ്പർ" width="6%"></e-column>
		</e-columns>
	</ejs-grid>
</div>

<ng-template #check>
    // Need to get instance of below component
	<ejs-grid #childComponent [dataSource]='datas' allowPaging='true' (load)='load($event)' [pageSettings]='pageSettings'>
		<e-columns>
			<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
			<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'>
			</e-column>
			<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
			<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'>
			</e-column>
			<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
		</e-columns>
	</ejs-grid>
</ng-template>