HelpBot Assistant

How can I help you?

Column Template in Angular Grid Component

19 Mar 202624 minutes to read

The Syncfusion® Angular Grid component provides a template property that enables rendering custom elements in a column instead of the default field value. This feature is ideal for displaying images, buttons, hyperlinks, or other custom content within a column.

When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for grid actions like sorting, filtering, or editing. It is essential to define the field property of the column to perform any grid actions.

Render image in a column

To render an image in a grid column, define a column template using the template property. In Angular, the template is provided using the ng-template directive, where the current row data is exposed through a local template variable (for example, let-data). This allows access to field values from the data source directly within the template, such as “data.EmployeeID” or “data.ImageURL”.

The following example demonstrates defining a template for the “Employee Image” field that displays an image element. The template property is set to a function that returns an HTML element containing an image tag with “src” and “alt” attributes.

import { Component, OnInit } from '@angular/core';
import { employeeData } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column headerText='Employee Image' width='150' textAlign='Center'>
                            <ng-template #template let-data>
                                <div class="image">
                                     <img src="https://ej2.syncfusion.com/angular/demos/assets/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field='FirstName' headerText='First Name' width=100></e-column>
                        <e-column field='LastName' headerText='Last Name' width=100></e-column>
                        <e-column field='City' headerText='City' width=100></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = employeeData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The template property supports any valid HTML content within a column. Ensure the alt attribute is descriptive for screen reader accessibility.

The Grid component provides support for rendering hyperlink columns and performing navigation on click using the template property. This feature is useful when displaying data that requires a link to another page or website. In Angular, the current row data is exposed through a local template variable let-data, allowing access to field values. In the template, attach event handlers (for example, (click)) to trigger custom logic when the element is clicked. The event handler receives the click event and any additional parameters passed to it.

The following example shows a hyperlink column in the Grid where the template renders an anchor tag that calls the onClick handler when clicked, opening a URL in a new window.

import { Component, OnInit } from '@angular/core';
import { employeeData } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column field='EmployeeID' headerText='Employee ID' width=90></e-column>
                        <e-column field='LastName' headerText='Last Name' width=150></e-column>
                        <e-column field='FirstName' headerText='First Name' width=150>
                            <ng-template #template let-data>
                                <div>
                                    <a href="#" (click)="onClick($event, data.FirstName)">
                                    {{data.FirstName}}
                                    </a>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = employeeData;
    }

    onClick(event:MouseEvent, firstName: string) {
        var url = 'https://www.google.com/search?q=';
        var searchUrl = url + firstName; 
        window.open(searchUrl);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL.

Render other components in a column

The Syncfusion® Angular Grid supports rendering custom components in a column using the template property. This allows integration of Syncfusion components like LineChart, ColorPicker, or DropDownList within a grid column.

To support grid actions like editing with custom components, configure the editSettings property (e.g., { allowEditing: true, mode: 'Normal' }). Refer to the editSettings documentation for details.

Render LineChart component in a column

The Syncfusion® Angular LineChart component is a lightweight sparkline chart used to display data trends. It connects data points with straight line segments to show patterns over time, without axes or labels. To render a sparkline within a template, define a template function that returns the Sparkline component. The chart requires a dataSource array of numeric values, and each grid row will display its own sparkline visualization.

The following example shows a Sparkline in the Grid column. The “lineData” array contains arrays of numbers (one per row), and the template function retrieves the appropriate data array for each row and passes it to the SparklineComponent.

import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData } from './datasource';
import { Sparkline } from '@syncfusion/ej2-angular-charts';
import { GridComponent } from '@syncfusion/ej2-angular-grids'

@Component({
  selector: 'app-root',
  template: `
    <ejs-grid #grid [dataSource]='data' height='315px' (created)="renderGridSparkline()">
      <e-columns>
        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
        <e-column field='FirstName' headerText='First Name' width=150></e-column>
        <e-column headerText='Employee Performance Rating' width='280'>
          <ng-template #template let-griddata>
            <div id="spkline{{griddata.EmployeeID}}"></div>
          </ng-template>
        </e-column>
      </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

  public data?: object[] = employeeData;
  @ViewChild('grid')
  grid?: GridComponent;

  public lineData: object[] = [
    [0, 6, -4, 1, -3, 2, 5],
    [5, -4, 6, 3, -1, 2, 0],
    [6, 4, 0, 3, -2, 5, 1],
    [4, -6, 3, 0, 1, -2, 5],
    [3, 5, -6, -4, 0, 1, 2],
    [1, -3, 4, -2, 5, 0, 6],
    [2, 4, 0, -3, 5, -6, 1],
    [5, 4, -6, 3, 1, -2, 0],
    [0, -6, 4, 1, -3, 2, 5],
    [6, 4, 0, -3, 2, -5, 1],
  ];

  ngOnInit(): void {
  }

  public getSparkData(type: string, count: number) {
    return this.lineData[count] as number[];
  }

  public renderGridSparkline(): void {
    setTimeout(() => {
      const length = (this.grid as GridComponent).getDataRows().length
      for (let i: number = 1; i <= length; i++) {
        let line: Sparkline = new Sparkline({
          height: '50px',
          width: '90%',
          lineWidth: 2,
          valueType: 'Numeric',
          fill: '#3C78EF',
          dataSource: this.getSparkData('line', i)
        });
        line.appendTo('#spkline' + i);
      }
    }, 100)
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render ColorPicker component in a column

The Syncfusion® ColorPicker component provides an intuitive method to select colors from a predefined color palette or custom colors. This component is suitable for scenarios such as picking a theme color or changing element colors on a page.

<div>
    <input ejs-colorpicker #colorPicker id="color-picker" type="color" [mode]="modeSettings" (change)="change($event)"/>
</div>

import { employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { FilterService, GridComponent, GridModule, GroupService, PageService, SortService } from '@syncfusion/ej2-angular-grids';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [ ButtonModule,  GridModule, ColorPickerModule ],
    providers: [PageService, SortService, FilterService,  GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='315px'[enableHover]="false">
                    <e-columns>
                        <e-column field='FirstName' headerText='FirstName' width=100></e-column>
                        <e-column field='LastName' headerText='Last Name' width=100></e-column>
                        <e-column field='City' headerText='City' width=100></e-column>
                        <e-column headerText='Change the color of row' width='120' textAlign='Center'>
                            <ng-template #template let-data>
                                <div class="colorpicker">
                                    <input ejs-colorpicker #colorPicker id="color-picker" type="color" [mode]="modeSettings" (change)="change($event)"/>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public modeSettings = 'Palette'
    @ViewChild('grid') 
    public grid?: GridComponent;

    change(args: ColorPickerEventArgs) {
        const selectedRows = (this.grid as GridComponent).getSelectedRows() as HTMLElement[];
        for (const row of selectedRows) {
            row.style.backgroundColor = args.value as string;
        }
        (this.grid as GridComponent).clearSelection();
    }

    ngOnInit(): void {
        this.data = employeeData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render DropDownList component in a column

The Grid component provides support for rendering DropDownList component in a column using the template property. This feature is useful when displaying data that requires selection from predefined options in a column.

The following example shows the DropDownList component in the Grid “Order Status” column.

<div>
    <ejs-dropdownlist [value]='data.OrderStatus' width="100" [dataSource]='dropData' [popupHeight]='150' [popupWidth]='150' ></ejs-dropdownlist>
</div>

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule,  ButtonModule, DropDownListModule ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='300'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                        <e-column headerText='Order Status'width='200'>
                            <ng-template #template let-data>
                                <div>
                                    <ejs-dropdownlist [value]='data.OrderStatus' width="100" [dataSource]='dropData' [popupHeight]='150' [popupWidth]='150' >
                                    </ejs-dropdownlist>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public dropData?: string[];

    ngOnInit(): void {
        this.data = data;
        this.dropData = ['Order Placed', 'Processing', 'Delivered'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render Chip component in a column

The Grid component provides support for rendering Chips component in a column using the template property. This feature is useful when displaying data that requires a chip component to be rendered in a column.

The following example shows the Chips component in the Grid “First Name” column.

<div>
    <ejs-chiplist id="chip" [text]="data.FirstName"></ejs-chiplist>
</div>

import { employeeData } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ButtonModule, ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { FilterService, GridModule, GroupService, PageService, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [  ButtonModule, GridModule, ChipListModule],
    providers: [PageService, SortService, FilterService, GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column field='LastName' headerText='Last Name' width=150></e-column>
                        <e-column field='City' headerText='City' width=150></e-column>
                        <e-column field='FirstName' headerText='FirstName' width=150>
                            <ng-template #template let-data>
                                <div class="chip">
                                    <ejs-chiplist id="chip" [text]="data.FirstName"></ejs-chiplist>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = employeeData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render ProgressBar component in a column

The Grid component supports rendering the Progress Bar component within a column using the template property. The Progress Bar component in a grid column visually tracks the progress of tasks or operations associated with specific records. This feature is useful for applications involving processes such as data loading, task completion, or other progressive activities.

The following example shows the Progress Bar component in the Grid “Freight” column.

<div>
    <ejs-progressbar [id]='data.OrderID' type='Linear' height='60' 
    [value]='data.Freight' trackThickness=24 progressThickness='20'>
    </ejs-progressbar>
</div>

import { data } from './datasource';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';

@Component({
    imports: [
        CommonModule,
        GridModule,
        ProgressBarModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' width=150></e-column>
                        <e-column field='CustomerID' headerText='Customer Name' width=150>
                        </e-column>
                        <e-column field='Freight' headerText='Freight' width=150>
                            <ng-template #template let-data>
                                <div>
                                    <ejs-progressbar [id]='data.OrderID' type='Linear' height='60' 
                                    [value]='data.Freight' trackThickness=24 progressThickness='20'>
                                    </ejs-progressbar>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {
    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render RadioButton in a column

The Syncfusion® Angular Grid supports rendering the RadioButton within a column using the template property. This feature is useful for displaying selection options, such as order statuses, payment methods, or approval choices, within the Grid.

The following example demonstrates rendering a RadioButton in the “Order Status” column of the Grid by defining the template property.

    <div style="display: flex; flex-direction: column; align-items: start; gap: 8px;">
        <ejs-radiobutton label="Pending" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Pending'"></ejs-radiobutton>
        <ejs-radiobutton label="Confirmed" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Confirmed'"></ejs-radiobutton>
        <ejs-radiobutton label="Shipped" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Shipped'"></ejs-radiobutton>
    </div>

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, RadioButtonModule ],
    standalone: true,
    selector: 'app-root',
    template: `
       <ejs-grid [dataSource]='data' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type="date" width=140></e-column>
            <e-column headerText='Order Status' width='180'>
                <ng-template #template let-data>
                    <div style="display: flex; flex-direction: column; align-items: start; gap: 8px;">
                        <ejs-radiobutton label="Pending" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Pending'">
                        </ejs-radiobutton>
                        <ejs-radiobutton label="Confirmed" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Confirmed'">
                        </ejs-radiobutton>
                        <ejs-radiobutton label="Shipped" name="radio-" cssClass="e-success" [checked]="data.OrderStatus === 'Shipped'">
                        </ejs-radiobutton>
                    </div>
                </ng-template>
            </e-column>
          </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];

    public ngOnInit(): void {
        this.data = data; 
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Using conditional template

The template property supports conditional rendering using Angular directives like *ngIf. This allows displaying different template elements based on data conditions. Complex conditional logic may impact rendering performance, so minimize DOM manipulation where possible.

The following example demonstrates rendering a checkbox conditionally based on the “Discontinued” field value. The template uses Angular’s *ngIf directive to check if data.Discontinued is true. If true, it renders a checked checkbox; otherwise, it renders an unchecked checkbox.

<e-column headerText='Discontinued' width='150' textAlign='Center'>
    <ng-template #template let-data>
        <div *ngIf="data.Discontinued; else elseblock">
            <input type="checkbox" checked>
        </div>
    </ng-template>
    <ng-template #elseblock><input type="checkbox">
    </ng-template>
</e-column>

import { categoryData } from './datasource';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ CommonModule, GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column headerText='Discontinued' width='150' textAlign='Center'>
                          <ng-template #template let-data>
                            <div *ngIf="data.Discontinued; else elseblock">
                                 <input type="checkbox" checked>
                            </div>
                          </ng-template>
                          <ng-template #elseblock><input type="checkbox"></ng-template>
                       </e-column>
                        <e-column field='ProductID' headerText='Product ID' width=150></e-column>
                        <e-column field='CategoryName' headerText='Category Name' width=150></e-column>
                        <e-column field='ProductName' headerText='Product Name' width=150></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = categoryData;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Any template element or custom component can be used in a conditional template based on application requirements.

Getting the row object by clicking on the template element

The Syncfusion® Angular Grid allows retrieving the row object of a selected record when clicking a template element. This is useful for performing custom actions based on the selected record.

The following example demonstrates a button element rendered in the “Employee Data” column with an onClick event handler that calls the “showDetails” method. The method receives the complete row data object as a parameter, which provides access to all field values for that record and enables displaying the information in a dialog popup.

import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData, SelectedRecordDataType } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'app-root',
    template: `
    <ejs-grid #grid [dataSource]='data' height='315px'>
        <e-columns>
            <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=130></e-column>
            <e-column field='FirstName' headerText='Name' width=120></e-column>
            <e-column headerText='Employee Data' width='150' textAlign='Right' isPrimaryKey='true'>
                <ng-template #template let-data>
                    <button class="empData" (click)="showDetails(data)">View</button>
                    <div [hidden]="!selectedRecord || selectedRecord !== data">
                        <ejs-dialog
                            #Dialog
                            [visible]="false"
                            width="50%"
                            showCloseIcon="true"
                            [header]="header"
                        >
                            <p><b>EmployeeID:</b> {{ selectedRecord?.EmployeeID }}</p>
                            <p><b>FirstName:</b> {{ selectedRecord?.FirstName }}</p>
                            <p><b>LastName:</b> {{ selectedRecord?.LastName }}</p>
                        </ejs-dialog>
                    </div>
                </ng-template>
            </e-column>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public header?: string;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('Dialog')
    public dialog?: DialogComponent;
    public selectedRecord?: SelectedRecordDataType;

    ngOnInit(): void {
        this.data = employeeData;
        this.header = 'Selected Row Details';
    }
    showDetails(data: SelectedRecordDataType) {
        (this.dialog as DialogComponent).visible = true;
        this.selectedRecord = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Use custom helper inside the template

The Syncfusion® Grid supports the use of custom helpers within the ng-template directive of a column. This capability enables the creation of complex templates that incorporate additional helper functions beyond those available through the default template syntax.

To use a custom helper function inside a column template, the function must first be added to the template’s context.

The following example demonstrates using a custom helper function inside the template property, using the ng-template element for the Freight column.

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='300'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90>
                        <ng-template #template let-data>
                            {{ formatCurrency(data.Freight) }}
                        </ng-template>
                        </e-column>
                        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    public formatCurrency(value: number): string {
        return '₹ ' + value.toFixed(3);
    }

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom helpers can only be used inside the ng-template method of a column.

Dynamically adding template column

The Grid component supports dynamically adding template columns at runtime. This allows modifying the grid structure after initialization based on UI interactions or other dynamic conditions (for example, adding a new column when a button is clicked). Dynamically adding columns involves creating a new ColumnDirective with a template and inserting it into the grid’s column collection.

The following example demonstrates adding a template column using an external button click. When the button is clicked, a new “Ship Country” column with a Dropdownlist template is added to the grid at runtime. The column uses both the template property for the cell content and the headerTemplate property to customize the column header.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { Column, ColumnModel, GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        ButtonModule,
        DropDownListModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `
    <button ejs-button id="button" cssClass="e-outline" (click)="addTemplateColumn()">Add Column</button>
    <ejs-grid style="margin-top: 5px" id='grid' #grid [dataSource]='dataSet' height='300px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width=80></e-column>
            <e-column field='CustomerID' headerText='Customer Name' width=100>
            </e-column>
            <e-column field='Freight' headerText='Freight' width=80></e-column>
            <ng-template let-data #template>
                <ejs-dropdownlist id="data.OrderID" [dataSource]="dataSet" [value]="data.ShipCountry" [fields]='fields' index=0></ejs-dropdownlist>
            </ng-template>
            <ng-template #headerTemplate let-data>
                <div>
                <span class="e-icons e-location"></span> Ship Country
                </div>
            </ng-template>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public dataSet?: object[];
    @ViewChild('grid')
    public grid: GridComponent;
    @ViewChild('template')
    public template: object;  
    @ViewChild('headerTemplate')
    public headerTemplate: object;
    public fields: Object = { text: 'ShipCountry', value: 'ShipCountry'};

    public addTemplateColumn() {
        var templateColumnValues = {field: 'ShipCountry', headerText: 'Ship Country', width: 100, headerTemplate: this.headerTemplate, template: this.template};
        this.grid.columns.push(templateColumnValues as Column & string & ColumnModel);
        this.grid.refreshColumns();
    }

    ngOnInit(): void {
        this.dataSet = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enhancing Grid performance by enabling or disabling Aria Labels

By default, the Syncfusion® Angular Grid automatically adds custom “aria-label” attributes to template cells. These attributes combine the cell value, the identifier “is template cell”, and the column header name. Aria labels are accessibility features that help screen readers understand the content and purpose of cells.

However, in applications with many template columns, these labels can slightly impact rendering performance. To improve performance, disable aria labels for non-critical template columns by setting the enableAriaLabel property to false in the templateOptions of those columns. If accessibility support is required, set it to true to retain aria labels.

The following example enables Aria labels for the “Employee Image” column and disables them for the “First Name” column in the Syncfusion® Angular Grid.

import { GridModule } from '@syncfusion/ej2-angular-grids';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { Component, OnInit } from '@angular/core';
import { employeeData } from './datasource';

@Component({
imports: [ChipListModule,GridModule],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                    <e-columns>
                        <e-column headerText='Employee Image' width='150' templateOptions="imageTemplateOptions" textAlign='Center'>
                            <ng-template #template let-data>
                                <div class="image">
                                     <img src="https://ej2.syncfusion.com/angular/demos/assets/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field='FirstName' headerText='First Name' templateOptions="nameTemplateOptions" width=100>
                            <ng-template #template let-data>
                                <div class="chip">
                                    <ejs-chiplist id="chip" [text]="data.FirstName"></ejs-chiplist>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field='LastName' headerText='Last Name' width=100></e-column>
                        <e-column field='City' headerText='City' width=100></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public imageTemplateOptions: object;
    public nameTemplateOptions: object;
    ngOnInit(): void {
        this.data = employeeData;
        this.imageTemplateOptions = { enableAriaLabel: true };
        this.nameTemplateOptions = { enableAriaLabel: false };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When using template columns, test the rendering across different screen sizes and devices to ensure responsiveness, especially for complex components like DropDownList or LineChart.