Customize the empty record template in Angular Grid component

17 Sep 20255 minutes to read

The empty record template feature in the Syncfusion Angular Grid lets you define custom content—such as images, descriptive text, or even other components—to be displayed when the grid contains no records. This replaces the default ‘No records to display’ message for a more engaging and branded user experience.

Enable this feature by setting the emptyRecordTemplate property of the Grid. The emptyRecordTemplate accepts either an HTML element or a function that returns an HTML element to render in the empty state.

The following example demonstrates rendering an image and text within the template to indicate that the grid has no data to display.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DataManager } from '@syncfusion/ej2-data';
import { data, addImage } from './datasource';

@Component({
imports: [ GridModule],
providers: [PageService, EditService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
        <div class="control-section">
            <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>
                    <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
                </e-columns>
                
                <ng-template #emptyRecordTemplate>
                    <div class='emptyRecordTemplate'>
                        <img [src] = "imgUrl" class="e-emptyRecord" alt="No record">
                        <span>There is no data available to display at the moment.</span>
                    </div>
                </ng-template>
            </ejs-grid>
        </div>`,
    styleUrls: ['app.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
    public data!: Object[];
    public imgUrl!: string;
    public pageSettings!: Object;
    public editSettings!: Object;
    public toolbar!: string[];
    public customeridrules!: Object;
    public orderidrules!: Object;
    public freightrules!: Object;
    public editparams!: Object;
    public formatoptions!: Object;

    ngOnInit(): void {
        this.data = [];       
        this.imgUrl = addImage;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editparams = { params: { dataSource: new DataManager(data), fields: {text:'ShipCountry',value:'ShipCountry'}}};
        this.pageSettings = { pageCount: 5 };
        this.customeridrules = { required: true };
        this.orderidrules = { required: true, number: true };
        this.freightrules = { required: true, number: true };
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' };
    }
}

main.ts

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