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

Question

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:

<ejs-grid
      #ejsGrid
      [dataSource]="dataSource"
      [allowPaging]="allowPaging"
      [allowFiltering]="allowFiltering"
      [columns]="columns">
</ejs-grid>

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<any>
    | 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:

<app-dynamic-grid
    #dynamicGrid
    [dataSource]="projects"
    [allowFiltering]="true"
    [allowSorting]="true"
    [columns]="gridColumns"
  >
  </app-dynamic-grid>
  <ng-template #creationTimeTemplate let-data>
    <input type="text" [value]="data.toString()">
  </ng-template>

The issue is that I can't get whatever is in my ngTemplate to get rendered in the UI.

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

0 Answers0