Displaying Custom Templates in Angular Grid component

The Angular Data Grid permits the use of custom helper functions within ng-template directives inside column templates. This enables creating complex, data-driven templates and integrating utility logic for formatting or display customization.

In the example below, the “Customer Rating” column uses a custom template with the *ngFor directive to iterate through an array and generate a collection of <span> elements representing stars. The ngClass directive is used in conjunction with a helper method (such as isRatingGreater) to dynamically set CSS classes for each star, supporting custom logic for interactive or conditionally styled UI.

CSS rules to render stars and apply highlighting:

.e-grid .rating .star:before {
    content: '★';
}

.e-grid .rating .star {
    font-size: 132%;
    color: lightgrey;
}

The ngClass directive dynamically assigns classes based on the result of the isRatingGreater method, highlighting the star using the CSS below:

.e-grid .rating .star.checked {
    color: #ffa600;
}

The following example demonstrates using a helper inside a loop with a template column in the grid.

import { data } 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 #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="Rating" headerText="Customer Rating" width="120">
                            <ng-template #template let-data>
                            <div class="rate">
                                <div class="rating">
                                <span
                                    *ngFor="let i of item"
                                    [ngClass]="{
                                    checked: isRatingGreater(data.Rating, i),
                                    star: true
                                    }"
                                ></span>
                                </div>
                            </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public item: number[] = [1, 2, 3, 4, 5];

    isRatingGreater(dataRating: number, comparisonValue: number): boolean {
      return dataRating >= comparisonValue;
    }

    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));