How to render dynamic columns using ngTemplate in ejGrid after extracting the grid in a reusable component using Syncfusion grid for Angular?

I'm trying to implement a reusable component that encapsulates the ejGrid component. My problem lies within the part concerning whether the column has a template or not. For context, I implemented a DyncamicGridComponent that encapsulates the grid. Then, from a parent component, I pass to the dynamicGridComponent my columns config through property binding. Here's my demo DynamicGridComponent.ts import { Component, Input } from '@angular/core'; import { ColumnModel, Column } from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-dynamic-grid', templateUrl: './dynamic-grid.component.html', styleUrls: ['./dynamic-grid.component.css'], }) export class DynamicGridComponent { @Input() dataSource: { [key: string]: object }[] | object[] | undefined; @Input() columns: ColumnModel[] | string[] | Column[] | undefined; @Input() allowSorting: boolean | undefined; @Input() allowPaging: boolean | undefined; @Input() allowFiltering: boolean | undefined; } Here's my DynamicGridComponent's template file: Here's my appComponent.ts file import { Component, TemplateRef, ViewChild } from '@angular/core'; import { templateCompiler } from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'Demo'; @ViewChild('creationTimeTemplate') creationTimeTemplate: | TemplateRef | undefined; gridColumns: any[] = []; projects: any[] = []; ngOnInit(): void { this.gridColumns = [ { field: 'id', headerText: 'ID', textAlign: 'center', type: 'number' }, { field: 'name', headerText: 'Name', textAlign: 'center', type: 'string', }, { field: 'creation_time', headerText: 'Creation Date', textAlign: 'center', type: 'date', template: this.creationTimeTemplate, templateFn: templateCompiler(this.creationTimeTemplate as any), }, { field: 'description', headerText: 'Description', textAlign: 'center', type: 'string', }, { field: 'membersCount', headerText: 'Members', textAlign: 'center', type: 'number', }, { field: 'ownerName', headerText: 'Owner', textAlign: 'center', type: 'string', }, ]; this.projects = [ { id: 1, name: 'ABC', creation_time: new Date(), description: 'desc1', membersCount: 10, ownerName: 'AA', }, ]; } } And, here's my appcomponent's template file: The issue is that I can't get whatever is in my ngTemplate to get rendered in the UI.