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

17 May 20245 minutes to read

The Syncfusion Angular Grid allows you to use custom helpers inside the loop with ng-template directive of a column. This feature enables you to create complex templates that can incorporate additional helper functions.

To achieve this, you can use the *ngFor directive inside the template column to iterate through the array and the ngClass directive to define dynamic function.

The Customer Rating column includes a custom template defined using <ng-template>. Inside this template, *ngFor directive is used to iterates through the item array and generates <span> tag, displayed as stars using the CSS below:

.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;
}

This is demonstrated in the following example.

app.component.ts

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

main.ts

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