how to get an instance of component which has placed inside ng-template?

Question

i have doubts in angular ng-template. i have used mycomponent inside ng-temmplate then itried 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);
  }
 }

Need to help to solve this scenario........!