Data Table Data Loading Template

Data Loading Template provides an option to customize the appearance of data loading spinner as desired which is displayed while data loading or fetching. To define the data loading template, nest an <ng-template> tag with the showLoadingSpinner directive inside. Further information can be found in Data Loading Spinner section.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Data Loading, Please wait...

import { Component } from '@angular/core';

@Component({
  selector: 'app-data-loading-template-usage',
  templateUrl: './data-loading-template-usage.component.html'
})
export class DataLoadingTemplateUsageComponent {
  public items: any[];
}

Basic Usage

As same to all other templates, we can define To define the data loading template, nest an <ng-template> tag with the showLoadingSpinner directive inside by overriding Data Loading Spinner for indicating the on-going data fetch operation.

The following example depicts the integration of data loading template. Here we use simple text to override the native loading functionality.

  <ng-template #ngDataTableLoadingSpinner>
    <h1>Data Loading, Please wait...</h1>
  </ng-template>
  <ng-template #ngDataTableLoadingSpinner>
    <h2 style="font-family: 'Helvetica Neue'; color: #8f893f;">Data Loading, Please wait...</h2>
  </ng-template>

Suggested Links

No Records Template
Cell Template
Row Expand Template
API Doc for Data Table Data Loading Template