Loading Spinner Template

Loading Spinner Template will allows to customize the data loading spinner as desired. to enable this option it is mandatory to enable the showLoadingSpinner property in grid table level configuration. Further information can be found upon this topic 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-loading-spinner-template-usage',
  templateUrl: './loading-spinner-template-usage.component.html'
})
export class LoadingSpinnerTemplateUsageComponent {
  public items: any[];
}

Basic Usage

As same as the all other templates, we can bind a specific property #ngDataTableLoadingSpinner into ng-template to indicates we are going to define a template by overriding Data Loading Spinner for indicates the on-going data fetch operation.

The following example code block demonstrate the way of data table loading spinner template can be using. In here we uses simple text to override the native loading functionality.

  <ng-template #ngDataTableLoadingSpinner>
    <h1>Data Loading, Please wait...</h1>
  </ng-template>

Apart from the predefined format, users are facilitated with to define their own template as desired as below.

  <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 Loading Spinner Template