Use custom helper inside the loop with templates in Angular Grid component

17 Sep 20255 minutes to read

The Syncfusion Angular Grid permits the use of custom helper functions within ng-template directives inside column templates. This enables you to create complex, data-driven templates and integrate 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'

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

@Component({
imports: [
        
        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));