Data Loading Spinner

Data Loading Spinner can be used to indicate the data fetch operation and once the data is successfully fetched spinner will get disappear from the grid.

Loading spinner is very useful, when Server Side Basic or Server Side Web Socket Data Binding operations are being executed. By default loading spinner is enabled and the Ornamentum will keep indicating the end user that the data retrieval process in progress.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

  constructor(private dataFetchService: DataFetchService) {
    setTimeout(() => {
      this.items = this.dataFetchService.fetchStaticData();
    }, 5000);
  }
}

Basic Usage

showLoadingSpinner: boolean   Default Value: trueTarget Component: <ng-data-table>

By default the Loading Spinner is enabled. Loading spinner can be displayed by setting true value to showLoadingSpinner property in table level in the data table configuration.

Following example depicts how to disable the Data Loading Spinner.

  <ng-data-table
    ...
    [showLoadingSpinner]="true">
  </ng-data-table>

User can bind a custom template into the data loading scenario as desired. For additional Data Loading templates please refer Data Loading Template section.

Data Loading Template
No Records Template
API Doc for Data Table Loading Spinner