We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display custom component in grid template

I'm currently trying to display a custom component in an ejs-grid,

My code is here: https://stackblitz.com/edit/angular-hlndpc-dmfmpj?file=src/app.component.html

I am inputting the template as follows:

ngOnInit(): void {
this.items = [];
textValue: 'Hello World',
this.columns = [];
field: 'textValue',
template: '',

Where the icon component is simply:

<div>Hello Worlddiv>

I am then adding the template to the grid as follows:

<div style="padding: 8px">
<ejs-grid #grid [dataSource]="items">
<ng-template ngFor let-column [ngForOf]="columns">

However, the cells display nothing. Passing the template as follows works, but I would like to be able to pass in my own components, thanks.

<div>Hello World</div>

1 Reply

SI Santhosh Iruthayaraj Syncfusion Team April 24, 2023 01:46 PM UTC

Hi Nick,

We have reviewed your query and understand that you need to render custom components using column template for dynamically generated columns. We have prepared a code snippet that should help you achieve your requirement.

Please refer to the code snippet below:



<div style="padding: 8px">

  <ejs-grid #grid [dataSource]="items" (dataBound)='dataBound()'>

    .  .  .  .  .


  <ng-template let-data #template>


      <!-- property value from ts file -->

      {{ templateValue }}



      <!-- field value -->

      {{ data.textValue }}







import {

  .  .  .  .  . ,


from '@syncfusion/ej2-angular-grids';



export class AppComponent {

  .  .  .  .  .

  @ViewChild('template'public templateany;

  initialRenderboolean = true;

  templateValuestring = "Template Text";


  dataBound() {

    if(this.initialRender) {

      this.initialRender = false;

      this.grid.columns[0].template = this.template;

      this.grid.columns[0].templateFn = templateCompiler(this.template);






We have modified your sample using the above code snippet.

Sample: https://stackblitz.com/edit/angular-hlndpc-krpwmz?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please let us know if you have any further queries or concerns.


Santhosh I

Live Chat Icon For mobile
Up arrow icon